Images not reflected in the gallery after saved - javascript

if (action.equals("saveToGallery")) {
JSONObject obj = args.getJSONObject(0);
String imageSource = obj.has("imageSrc") ? obj.getString("imageSrc") : null;
String imageName = obj.has("imageName") ? obj.getString("imageName") : null;
String savedImgSrc = saveImageToGallery(imageSource, imageName);
Log.v("SAve To Gallery ", "saved file url: " + savedImgSrc);
return new PluginResult(PluginResult.Status.OK);
}
return new PluginResult(PluginResult.Status.INVALID_ACTION);
} catch (JSONException e) {
e.printStackTrace();
return new PluginResult(PluginResult.Status.JSON_EXCEPTION);
}
public String saveImageToGallery(String imgSrc, String imgName) {
Log.v("Save To Gallery ", "image SRc: " + imgSrc + " , image Name:"
+ imgName);
Context ctx = this.ctx;
AssetManager assmgr = ctx.getAssets();
File tempDir = new File("/sdcard/HarmonyDayApp/wallpapers/");
tempDir.mkdirs();
File file = new File(tempDir, imgName);
try {
InputStream is = null;
is = assmgr.open("www/" + imgSrc);
OutputStream os = new FileOutputStream(file);
byte[] data = new byte[is.available()];
is.read(data);
os.write(data);
sendBroadcast(new Intent(Intent.ACTION_MEDIA_MOUNTED, Uri.parse("file://"+Environment.getExternalStorageDirectory())));
is.close();
os.close();
} catch (IOException ex) {
Log.w("ExternalStorage", "Error writing " + file, ex);
}
return file.getAbsolutePath();
}
This is the code I am using to save the image to the device gallery. However, after the image is saved, if i check the gallery imeediately, the image is not there. It comes when i reload the application, or the gallery after sometime. Any suggestion to this problem will be helpful.

Try this:
After adding your image in gallery you need to broadcast
sendBroadcast(new Intent(Intent.ACTION_MEDIA_MOUNTED, Uri.parse(“file://”+
Environment.getExternalStorageDirectory())));
Hopefully it will work for you. :)

you need to scan media manually, after your image has been saved, by following code:
// Tell the media scanner about the new file so that it is
// immediately available to the user.
MediaScannerConnection.scanFile(this,new String[] { file.toString() }, null,
new MediaScannerConnection.OnScanCompletedListener() {
public void onScanCompleted(String path, Uri uri) {
Log.i("ExternalStorage", "Scanned " + path + ":");
Log.i("ExternalStorage", "-> uri=" + uri);
}
});

Related

How to upload multiple images from front-end using JavaScript, jQuery, Ajax in JSP file and send it into Spring Boot Controller?

I am working on a spring boot web application, where I want to upload multiple images of a product at a time along with other fields (for example product name, SKU code, category, tags, subcategory, etc). I have written code for RESTful API to upload multiple images and it is working perfectly for me. I tested API using postman and it is working fine. But, I don't know how to do it from the front end. I am showing you my front-end code below, where I am sending a single image to my controller using Ajax.
$("#file").change(function(){
var formData = new FormData();
var fileSelect = document.getElementById("file");
if(fileSelect.files && fileSelect.files.length == 1) {
var file = fileSelect.files[0];
formData.set("file",file,file.name);
}else{
$("#file").focus();
return false;
}
var request = new XMLHttpRequest();
try {
request.onreadystatechange=function() {
if(request.readyState==4) {
var v = JSON.parse(request.responseText);
if(v.status==="OK") {
alert("Product Image Uploaded Successfully")
document.getElementById('imagepath').value = v.response;
}
}
}
request.open('POST',"<%=AkApiUrl.testuploadfile%>");
request.send(formData);
} catch(e) {
swal("Unable to connect to server","","error");
}
});
As I told you, the above code is to send a single file at a time. I am showing you my API controller code also:
#RequestMapping(value = AkApiUrl.testuploadfile, method = { RequestMethod.POST, RequestMethod.GET }, produces = {MediaType.APPLICATION_JSON_VALUE }) public ResponseEntity<?> testuploadfile(HttpServletRequest request, #RequestParam("files") MultipartFile[] files) {
CustomResponse = ResponseFactory.getResponse(request);
String imgurl = "NA";
try {
String path = Constants.webmedia;
String relativepath = "public/media/";
System.out.println("Here is the image: ");
List<MultipartFile> multifile = Arrays.asList(files);
if( null != multifile && multifile.size()>0) {
for (int i=0; i < multifile.size(); i++) {
String filename = files[i].getOriginalFilename();
String extension = filename.substring(filename.lastIndexOf("."), filename.length());
int r = (int )(Math.random() * 500 + 1);
SimpleDateFormat format = new SimpleDateFormat("yyyyMMddhhmmss");
Date date = new Date();
String formatdate = format.format(date);
formatdate = "ECOM" + formatdate + r;
byte[] bytes = files[i].getBytes();
BufferedOutputStream stream = new BufferedOutputStream( new FileOutputStream(new File(path + File.separator + formatdate + extension)));
stream.write(bytes);
stream.flush();
stream.close();
String newimgurl = relativepath + formatdate + extension;
imgurl = imgurl+"##"+newimgurl;
if(imgurl != null) {
CustomResponse.setResponse(imgurl);
CustomResponse.setStatus(CustomStatus.OK);
CustomResponse.setStatusCode(CustomStatus.OK_CODE);
}
}
}
} catch (Exception e) {
e.printStackTrace();
CustomResponse.setResponse(null);
CustomResponse.setStatus(CustomStatus.Error);
CustomResponse.setStatusCode(CustomStatus.Error_CODE);
CustomResponse.setResponseMessage(CustomStatus.ErrorMsg);
}
return new ResponseEntity<ResponseDao>(CustomResponse, HttpStatus.OK);
}
This API is working fine, I am getting desired response. But I do not know how should I implement this thing on the JSP page. Please, any suggestions would be appreciated.

How do I get an Android image and put it on the WebView?

My web is currently configured with spring frame workloads. What I want to do is take an image of Android and float it on the Web.
Importing Android images will be done using Android image selection modules.
Is this possible?
And I have to save it as an image file on the server. Is this possible?
Controller that stores current image files
#RequestMapping(value="/profile_image", method = RequestMethod.POST)
public #ResponseBody Map<String, Object> profile_image(HttpServletRequest webRequest
, #RequestParam(value="image", required=false) MultipartFile image
Map<String, String> param = new HashMap<String, String>();
Map<String, Object> result = new HashMap<String, Object>();
try {
// The image has been updated.
String imagePath = "";
if (image != null) {
String Extension = Config.USER_PROFILE_IMAGE_EXT;
String fileName = "user_profile_"+ user_nickname + Utils.getCurrentTime("yyyyMMddHHmmssSSS");
imagePath = Define.CONTENTS_FILE_PATH_4 + fileName + Extension ;
File saveDir = new File(Define.CONTENTS_SAVE_PATH + Define.CONTENTS_FILE_PATH_4);
if (!saveDir.isFile()) saveDir.mkdirs();
image.transferTo(new File(Define.CONTENTS_SAVE_PATH + imagePath));
String fileName_thumbnail = fileName + "_thumb" + Extension;
File thumbnail = new File(Define.CONTENTS_SAVE_PATH + Define.CONTENTS_FILE_PATH_4 + fileName_thumbnail);
thumbnail.getParentFile().mkdirs();
Thumbnails.of(saveDir + "/" + fileName + Extension).size(Config.USER_PROFILE_IMAGE_WIDTH, Config.USER_PROFILE_IMAGE_HEIGHT).outputFormat("jpg").toFile(thumbnail);
}
param.put("imagepath", (!imagePath.equals("")) ? Define.PLATFORM_SERVER_HOST_NAME + imagePath : "");
if (backOfficeDao.update_user_profile_image(param) < 1) {
result.put("resultMsg", "Databases update fail..");
} else {
result.put("resultMsg", "Shop successful in modifying product information.");
}
} catch (Exception e) {
e.printStackTrace();
result.put("resultCode", Define.ERROR_CODE_001);
result.put("resultMsg", "[ERROR] Server error");
}
return result;
}
I should take the picture from the device store, place it in WebView, send the Image file to the WebService and save it to the server.
Thanks you in advance
It sends file data via communication with the server in the mutipart type from Android, which saves the file from my controller, reads the data that I saved, and refreshes it, allowing the user to view the image file data that they have imported.

Queries can not be applied to a response content of type 'System.Net.Http.StreamContent'. The response content must be an ObjectContent

I am trying to download a file using knockout v3.2.0, webapi, odata and get this error when I try to return the file as HttpResponseMessage.
Here is my controller code:
[EnableQuery]
public HttpResponseMessage GetAttachment([FromODataUri] int key)
{
try
{
DataAccess.Attachment a = db.Attachments.Where(x => x.AttachmentId == key).FirstOrDefault();
HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
MemoryStream memStream = new MemoryStream();
memStream.Write(a.AttachmentData, 0, a.AttachmentData.Length);
result.Content = new StreamContent(memStream);
result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
result.Content.Headers.ContentDisposition.FileName = a.AttachmentName;
return result;
//return Request.CreateResponse(HttpStatusCode.OK, result);
}
catch (Exception exception)
{
Request.CreateErrorResponse(HttpStatusCode.InternalServerError, exception.Message);
return null;
}
}
That's how I am trying to download from JavaScript:
self.downloadDocument = function (attachmentId) {
var serviceRequestUrl = dbhdd.buildUrl.buildSPContextUrl("/api/Attachments(" + 1 + ")");
window.location.href = serviceRequestUrl;
};
Which gives me this error- Queries can not be applied to a response content of type 'System.Net.Http.StreamContent'. The response content must be an ObjectContent.
I am relatively new to this. Any guidance in fixing this/alternate approach will be highly appreciated.
So I removed [EnableQuery] and it worked both in IE and Chrome!

JavaScript - Mqtt Sending and Reciving Image

I am currently working on a project in which I want to send an image as ByteArray to a mosquitto broker with java to the topic images.
The subscriber of these Topic is a JavaScript application, which should convert the ByteArray,made in Java, back to an Image.
The reception of the image is working well, but the image cannot be shown correctly.
What I got so far:
Java Code to Publish an Image
public void doDemo(){
try {
client = new MqttClient("tcp://192.168.56.1", "Camera1", new MemoryPersistence());
MqttConnectOptions connOpts = new MqttConnectOptions();
connOpts.setCleanSession(true);
client.connect(connOpts);
MqttMessage message = new MqttMessage();
File imgPath = new File(Reciver.class.getResource("Card_1007330_bg_low_quality_000.png").getPath());
BufferedImage bufferedImage = ImageIO.read(imgPath);
// get DataBufferBytes from Raster
WritableRaster raster = bufferedImage .getRaster();
DataBufferByte data = (DataBufferByte) raster.getDataBuffer();
message.setPayload(data.getData());
client.publish("spengergasse/building-b/2.14/images", message);
} catch (MqttPersistenceException e) {
e.printStackTrace();
} catch (MqttSecurityException e) {
e.printStackTrace();
} catch (MqttException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}finally {
try {
client.disconnect();
} catch (MqttException e) {
e.printStackTrace();
}
}
}
JavaScript to show the image
function onMessageArrived(r_message){
console.log(r_message);
document.getElementById("ItemPreview").src = "data:image/png;base64," + convert(r_message.payloadBytes);
}
function convert(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
After Reciving the Image I am gettin this:
Maybe someone could help me out.
Thanks a lot :D
Give this a try:
function convert(buffer) {
var decoder = new TextDecoder('utf8');
return btoa(decoder.decode(buffer));
}
I think the best approach here is to use blobs. Instead of converting the array to base64 which is terribly slow an error prone if not done correctly, you create a blob from the input array and assign it to the .src property like this:
var blob = new Blob([r_message.payloadBytes], {type: 'image/png'});
document.getElementById("ItemPreview").src = URL.createObjectURL(blob);

writing pdf from javascript/cordova

In our mobile application (cordova+html4) we have a requirement to display the PDF from a stream. We have a service which returns pdf stream. We would like to store that stream to a temp folder location of the mobile and display the PDF.
The below sample java sample java code does the exact thing what I need. But how can I achive this functionality on java script? I mean reading a binary stream in java script.
String fileURL = "https://1/////4/xyz";
String saveDir = "D:/Works";
try {
URL url = new URL(fileURL);
HttpURLConnection httpConn = (HttpURLConnection) url
.openConnection();
httpConn.setRequestProperty("Content-Type",
"application/x-www-form-urlencoded");
httpConn.setRequestProperty("TOKEN",
"ghZtxnPfpJ63FgdT/59V+5zFTKHRdwm6rIfGJC+0B5W5CJ9pG33od7l+/L6S8R56");
int responseCode = httpConn.getResponseCode();
System.out.println("Reseponse Code = " + responseCode);
if (responseCode == HttpURLConnection.HTTP_OK) {
String fileName = "";
String disposition = httpConn
.getHeaderField("Content-Disposition");
String contentType = httpConn.getContentType();
int contentLength = httpConn.getContentLength();
if (disposition != null) {
// extracts file name from header field
int index = disposition.indexOf("filename=");
if (index > 0) {
fileName = disposition.substring(index + 10,
disposition.length() - 1);
}
} else {
// extracts file name from URL
fileName = fileURL.substring(fileURL.lastIndexOf("/") + 1,
fileURL.length());
}
System.out.println("Content-Type = " + contentType);
System.out.println("Content-Disposition = " + disposition);
System.out.println("Content-Length = " + contentLength);
System.out.println("fileName = " + fileName);
// opens input stream from the HTTP connection
InputStream inputStream = httpConn.getInputStream();
String saveFilePath = saveDir + File.separator + fileName;
// opens an output stream to save into file
FileOutputStream outputStream = new FileOutputStream(
saveFilePath);
int bytesRead = -1;
byte[] buffer = new byte[BUFFER_SIZE];
while ((bytesRead = inputStream.read(buffer)) != -1) {
outputStream.write(buffer, 0, bytesRead);
}
outputStream.close();
inputStream.close();
System.out.println("File downloaded");
} else {
System.out
.println("No file to download. Server replied HTTP code: "
+ responseCode);
}
httpConn.disconnect();
} catch (MalformedURLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Thre's two libraries that you may want to have a look at :
jsPDF if you're trying to generate pdf from javascript and
pdf.js if you're trying to implement a pdf viewer in your interface.
One of those two should do the trick for you.

Categories