How to save an Image in Parse.com via JavaScript? - javascript

I wanna add new Object that containing an Image in one of its columns , but it dose not save My Pic , Is there any mistake in my code ? specially part of saving Image !!
My JavaScript where the problem appeared:
It never upload my pic in parse !!
<script type="text/javascript">
Parse.initialize("key", "key");
var products = Parse.Object.extend("products");
var fileUploadControl = $("#profilePhotoFileUpload")[0];
if (fileUploadControl.files.length > 0) {
var file = fileUploadControl.files[0];
var name = "photo.png";
var parseFile = new Parse.File(name, file);
}
parseFile.save().then(function() {
//The file has been saved to Parse.
}, function(error) {
// The file either could not be read, or could not be saved to Parse.
});
</script>
Here I added html line to upload file:
<input type="file" id="profilePhotoFileUpload">

I got the answer I am sharing it with you maybe someone get benefit
The THML line to upload file is:
<input type="file" id="pic">
The code in <script> to get and save image in parse is :
var fileUploadControl = $("#pic")[0];
if (fileUploadControl.files.length > 0) {
var file = fileUploadControl.files[0];
var name = "photo.png";
var parseFile = new Parse.File(name, file);
//put this inside if {
parseFile.save().then(function() {
// The file has been saved to Parse.
}, function(error) {
// The file either could not be read, or could not be saved to Parse.
});
// Be sure of ur parameters name
// prod is extend of my class in parse from this: var prod = new products();
prod.set("picture", parseFile);
prod.save();
}

Check the documentation here (at the end of that section, just before the one about retrieving files). Basically the issue is that like any other Parse object you need to save it first, then after the save is complete you can use it.
Create the file, save it, and in the save success handler you can then save the object with the reference to the file.
UPDATE: here's how your code above could be fixed:
Parse.initialize("key", "key");
var products = Parse.Object.extend("products");
var base64 = "V29ya2luZyBhdCBQYXJzZSBpcyBncmVhdCE=";
var file = new Parse.File("mypic.png", { base64: base64 });
file.save({
success: function(file) {
alert('File saved, now saving product with file reference...');
var prod = new products();
// to fill the columns
prod.set("productID", 1337);
prod.set("price", 10);
//I guess it need some fixing here
prod.set("picture", file);
prod.set("productName", "shampoo");
prod.set("productDescribe", "200 ml");
prod.save(null, {
success: function(prod) {
// Execute any logic that should take place after the object is saved.
alert('New object created with objectId: ' + prod.id);
},
error: function(error) {
// Execute any logic that should take place if the save fails.
// error is a Parse.Error with an error code and description.
alert('Failed to create new object, with error code: ' + error.description);
}
});
},
error: function(error) {
alert('Failed to save file: ' + error.description);
}
});

Related

Encoding a CSV file using javascript and passing the value to a 2nd Cloud Page not working as expected

What I am trying to do : I have a cloud page where the user can upload CSV file. When user clicks on the “upload” button the a function called getBase64() is called (please refer the below code). The getBase64() function will encode the uploaded file and post it to a second cloud page.The second cloud page then takes the posted data.
Note: I am trying to adapt this solution to my need (csv file) by referring to this article partially https://sfmarketing.cloud/2020/02/29/create-a-cloudpages-form-with-an-image-file-upload-option/
What’s the problem : When I try to click the the “upload” button the page is not taking me to the second CloudPage. Please could anyone let me know what I am doing wrong here ?
Here is the code:
CloudPage 1
<input id="file" type="file" accept=".csv">
<br>
<button id="button">Upload</button>
<script runat="client">
document.getElementById("button")
.addEventListener("click", function() {
var files = document.getElementById("file").files;
if (files.length > 0) {
getBase64(files[0]);
}
});
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
//prepare data to pass to processing page
var fileEncoded = reader.result;
var base64enc = fileEncoded.split(";base64,")[1];
var fullFileName = document.getElementById("file").files[0].name;
var fileName = fullFileName.split(".")[0];
var assetName = fullFileName.split(".")[1];
fetch("https://cloud.link.example.com/PAGE2", { //provide URL of the processing page
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
base64enc: base64enc,
fileName: fileName,
assetName: assetName
})
})
.then(function(res) {
window.alert("Success!");
})
.catch(function(err) {
window.alert("Error!");
});
};
reader.onerror = function(error) {
console.log('Error: ', error);
};
}
</script>
CloudPage 2
<script runat="server">
var jsonData = Platform.Request.GetPostData();
var obj = Platform.Function.ParseJSON(jsonData);
</script>
I do not see any errors in the code and when I click on the upload button I get a success message but it does not take me to the second page. Please can anyone guide me how to retrieve this posted data in second page as I am not able to get the encoded data in page 2?

Saving Image From HTML page To The NetSuite File Cabinet throw UNEXPECTED_ERROR

I have a suitelet that creates a html page. This page has a html element input type file. I am trying to take that file and upload it to the file cabinet. This is not done on a NetSuite form so the file element is not a netsuite file object.
The javascript on the HTML page is as follows
function uploadPhotoToNetSuite(){
var bookingid = $("#txtAddPhotoBookingId").val();
var caseid = $("#txtAddPhotoCaseId").val();
var isCase = caseid != "";
var base64Image = document.getElementById("imageToAdd").src;
var formData = new FormData();
formData.append("operations", 'uploadphoto');
formData.append("bookingid", bookingid);
formData.append("caseid", caseid);
formData.append("image", base64Image);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
var objResponse = JSON.parse(xhr.responseText);
if(!objResponse.uploadphoto.success){
alert(objResponse.uploadphoto.err);
} else {
closeLoading();
}
clearPhotoUpload();
}
};
xhr.open("POST", stAPIURL, true);
loading("Uploading Photo");
xhr.send(formData);
}
Then this matches to a method in my suitelet as follows.
function uploadPhoto(params, recUser){
try{
var imageFolder = 767406;
var thePhoto = params.image;
var filetype = "png";
if(thePhoto.indexOf("image/png") > -1) filetype = "png";
var theFile = file.create({
name: 'test.' + filetype,
fileType: filetype == "jpg" ? file.Type.JPGIMAGE : file.Type.PNGIMAGE,
contents: thePhoto,
description: 'This is a plain text file.',
encoding: file.Encoding.UTF8,
folder: imageFolder,
isOnline: true
});
var id = theFile.save();
} catch(err){
return {
success : false,
err : JSON.stringify(err)
}
}
return {
success : true
}
}
When this is happens I am getting the error UNEXPECTED_ERROR. The variable thePhoto is a base64 string of the image.
UPDATE:
I change the suitelet code to create a text file and the file uploaded perfectly and the base64 string was in the text file. When I took that base64 string and put it through a convertor, the image I uploaded was the result.
With this in mind, I changed the code again to;
var theFile = file.create({
name: 'test.jpg',
fileType: file.Type.JPGIMAGE,
contents: thePhoto,
description: 'This is a plain text file.',
encoding: file.Encoding.UTF8,
folder: imageFolder,
isOnline: true
});
And uploaded a .jpg file. Once again I got the error.
I was experiencing the same issue and finally figured out the resolution. NetSuite does convert Base64 image data to a JPEG file in the file cabinet automatically, but it can only be the raw base64 data. The base64 metadata at the beginning needs to be removed. After several hours of frustration, adding the first two lines to the function below allowed it to save properly as a JPEG file (without the unexpected error).
function saveJPEGFile(fileName, fileContents){
if (fileContents.startsWith('data:image/jpeg;base64'))
fileContents=fileContents.substring('data:image/jpeg;base64,'.length);
log.debug('saving file:',`${fileName} : ${fileContents.length} : ${fileContents}`)
var fileObj = file.create({
name : fileName,
fileType: file.Type.JPGIMAGE,
contents: fileContents,
folder : 1127
});
var fileId = fileObj.save();
}

How to display image stored in variable using the url?

USING PARSE.COM AND THE JAVASCRIPT SDK
With the below code I can get as far as letting the user upload an image from the webpage and storing that as an object in a "file" column in the parse db.
I can store the image details, including the url in the
What i'm unable to do is extract the url back out and display the image on a html page.
I've added the screen shots to show how the data is held in var profilePhoto but i'm then unable to make it show on the page using $("profile_pic").attr('src',jobApplication[0]);
What have I overlooked ? I've searched SO and cannot find an relevant question that helps with this.
RESULTS IN INSPECT ELEMENT
Arguments[1]0: t.Filecallee: function () {length: 1__proto__: Object user_profile.html:408
t.File {_name: "tfss-fe809632-ffb8-445c-99f3-1149e4ffdec5-IMG_0047.jpg", _source:
t.Promise, _previousSave: t.Promise, _url:
"http://files.parsetfss.com/0fc5cba8-caf7-4c81-aafc…fe809632-ffb8-445c-99f3-1149e4ffdec5-IMG_0047.jpg",
name: function…}_name:
"tfss-fe809632-ffb8-445c-99f3-1149e4ffdec5-IMG_0047.jpg"_previousSave:
t.Promise_source: t.Promise_url:
"http://files.parsetfss.com/0fc5cba8-caf7-4c81-aafc-36390888e497/tfss-fe809632-ffb8-445c-99f3-1149e4ffdec5-IMG_0047.jpg"proto:
Object
CODE
$(document).ready(function() {
var parseAPPID = "XXX";
var parseJSID = "XXXX";
//Initialize Parse
Parse.initialize(parseAPPID,parseJSID);
$("#fileUploadBtn").on("click", function(e) {
var fileUploadControl = $("#fileUploader")[0];
if (fileUploadControl.files.length > 0) {
var file = fileUploadControl.files[0];
var name = file.name;
console.log("here goes nothing...");
var parseFile = new Parse.File(name, file);
parseFile.save().then(function() {
console.log("Woot!");
console.dir(arguments);
var User = Parse.Object.extend("_User")
var jobApplication = Parse.User.current();
jobApplication.set("ProfilePic", parseFile);
jobApplication.save();
var profilePhoto = jobApplication.get("ProfilePic");
console.log(profilePhoto);
$("profile_pic").attr('src',jobApplication[0]);
}, function(error) {
console.log("Error");
console.dir(error);
});
}
});
});
$("profile_pic") returns elements with profile_pic tag name, which obviously is not the thing you need. Don't see your HTML, but if profile_pic is id or class name of your img element, this will work if you type $("#profile_pic") or $(".profile_pic") respectively.

How to upload base64 image resource with dropzone?

I'm trying to upload generated client side documents (images for the moment) with Dropzone.js.
// .../init.js
var myDropzone = new Dropzone("form.dropzone", {
autoProcessQueue: true
});
Once the client have finished his job, he just have to click a save button which call the save function :
// .../save.js
function save(myDocument) {
var file = {
name: 'Test',
src: myDocument,
};
console.log(myDocument);
myDropzone.addFile(file);
}
The console.log() correctly return me the content of my document
data:image/png;base64,iVBORw0KGgoAAAANS...
At this point, we can see the progress bar uploading the document in the drop zone but the upload failed.
Here is my (standart dropzone) HTML form :
<form action="/upload" enctype="multipart/form-data" method="post" class="dropzone">
<div class="dz-default dz-message"><span>Drop files here to upload</span></div>
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
I got a Symfony2 controller who receive the post request.
// Get request
$request = $this->get('request');
// Get files
$files = $request->files;
// Upload
$do = $service->upload($files);
Uploading from the dropzone (by drag and drop or click) is working and the uploads are successfull but using the myDropzone.addFile() function return me an empty object in my controller :
var_dump($files);
return
object(Symfony\Component\HttpFoundation\FileBag)#11 (1) {
["parameters":protected]=>
array(0) {
}
}
I think i don't setup correctly my var file in the save function.
I tryied to create JS image (var img = new Image() ...) but without any success.
Thanks for your help !
Finally i found a working solution without creating canvas :
function dataURItoBlob(dataURI) {
'use strict'
var byteString,
mimestring
if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
byteString = atob(dataURI.split(',')[1])
} else {
byteString = decodeURI(dataURI.split(',')[1])
}
mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]
var content = new Array();
for (var i = 0; i < byteString.length; i++) {
content[i] = byteString.charCodeAt(i)
}
return new Blob([new Uint8Array(content)], {type: mimestring});
}
And the save function :
function save(dataURI) {
var blob = dataURItoBlob(dataURI);
myDropzone.addFile(blob);
}
The file appears correctly in dropzone and is successfully uploaded.
I still have to work on the filename (my document is named "blob").
The dataURItoBlob function have been found here : Convert Data URI to File then append to FormData
[EDIT] : I finally wrote the function in dropzone to do this job. You can check it here : https://github.com/CasperArGh/dropzone
And you can use it like this :
var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmAAAAKwCAYAAA...';
myDropzone.addBlob(dataURI, 'test.png');
I can't comment currently and wanted to send this to you.
I know you found your answer, but I had some trouble using your Git code and reshaped it a little for my needs, but I am about 100% positive this will work for EVERY possible need to add a file or a blob or anything and be able to apply a name to it.
Dropzone.prototype.addFileName = function(file, name) {
file.name = name;
file.upload = {
progress: 0,
total: file.size,
bytesSent: 0
};
this.files.push(file);
file.status = Dropzone.ADDED;
this.emit("addedfile", file);
this._enqueueThumbnail(file);
return this.accept(file, (function(_this) {
return function(error) {
if (error) {
file.accepted = false;
_this._errorProcessing([file], error);
} else {
file.accepted = true;
if (_this.options.autoQueue) {
_this.enqueueFile(file);
}
}
return _this._updateMaxFilesReachedClass();
};
})(this));
};
If this is added to dropzone.js (I did just below the line with Dropzone.prototype.addFile = function(file) { potentially line 1110.
Works like a charm and used just the same as any other. myDropzone.addFileName(file,name)!
Hopefully someone finds this useful and doesn't need to recreate it!
1) You say that: "Once the client have finished his job, he just have to click a save button which call the save function:"
This implies that you set autoProcessQueue: false and intercept the button click, to execute the saveFile() function.
$("#submitButton").click(function(e) {
// let the event not bubble up
e.preventDefault();
e.stopPropagation();
// process the uploads
myDropzone.processQueue();
});
2) check form action
Check that your form action="/upload" is routed correctly to your SF controller & action.
3) Example Code
You may find a full example over at the official Wiki
4) Ok, thanks to your comments, i understood the question better:
"How can i save my base64 image resource with dropzone?"
You need to embedd the image content as value
// base64 data
var dataURL = canvas.toDataURL();
// insert the data into the form
document.getElementById('image').value = canvas.toDataURL('image/png');
//or jQ: $('#img').val(canvas.toDataURL("image/png"));
// trigger submit of the form
document.forms["form1"].submit();
You might run into trouble doing this and might need to set the "origin-clean" flag to "true". see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements
how to save html5 canvas to server

How do I upload an image using the Parse.com JavaScript SDK?

I'm using Parse.com to build a JavaScript app, and I need to upload photos. I have a form which allows users to select the image on their filesystem, but what do I do with it next? I can't find any documentation for this on the Parse site (not for the JavaScript SDK, anyway).
Here's a quick example on how to upload an image:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// ***************************************************
// NOTE: Replace the following your own keys
// ***************************************************
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_CLIENT_ID");
function saveJobApp(objParseFile)
{
var jobApplication = new Parse.Object("JobApplication");
jobApplication.set("applicantName", "Joe Smith");
jobApplication.set("profileImg", objParseFile);
jobApplication.save(null,
{
success: function(gameScore) {
// Execute any logic that should take place after the object is saved.
var photo = gameScore.get("profileImg");
$("#profileImg")[0].src = photo.url();
},
error: function(gameScore, error) {
// Execute any logic that should take place if the save fails.
// error is a Parse.Error with an error code and description.
alert('Failed to create new object, with error code: ' + error.description);
}
});
}
$('#profilePhotoFileUpload').bind("change", function(e) {
var fileUploadControl = $("#profilePhotoFileUpload")[0];
var file = fileUploadControl.files[0];
var name = file.name; //This does *NOT* need to be a unique name
var parseFile = new Parse.File(name, file);
parseFile.save().then
(
function()
{
saveJobApp(parseFile);
},
function(error)
{
alert("error");
}
);
});
});
</script>
<body>
<input type="file" id="profilePhotoFileUpload">
<img id="profileImg"/>
</body>

Categories

Resources