Develop Reference

Using browseForDoc() to define file path for saveAs() in javascript

I lurk this site all the time, but I think I have exhausted my options to find the info that I need.
I just want a button to trigger acrobat to run the browseForDoc() function, take the cPath the user selects and use that as the path for the saveAs() function. It seems like it should be easier than it has been. That is a folder-level script for adobe acrobat.
I get an error of "missing ; before statement 14". Besides that, it doesn't work. Please let me know what I am doing wrong.
//get windows user name
var getLoginName = app.trustedFunction(
function(){
//Get and return the user's login name
app.beginPriv();
return identity.loginName;
app.EndPriv();
}
);
var fileExt = ".pdf";
var filePath = function(cFS, cPath, bPromptToOverwrite){
this.cFS:cFS;
this.cPath=cPath;
this.bPromptToOverwrite=bPromptToOverwrite;
}
//Open save dialog,return user input values and saveas
var mySaveDialog = app.trustedFunction(
function browse(cPath,oDoc){
app.beginPriv();
app.browseForDoc(){bSave: true, cFilenameInit: oDoc, cFSInit: ""};
return this.cPath;
var myPath = new filePath{cPath: browse.cPath};
this.saveAs(myPath,myFile+fileExt);
app.endPriv();
}
);

plupload dynamic multipart_params for in progress uploads lost on re-initialization

I have a view in which I initialize a pluploader. I am able to leave this view and still allow the uploads to complete. The problem I am having is that whenever I re-enter the view, and there are uploads that are still in progress, the last multipart_param for "processId" that was assigned within "BeforeUpload" is used repeatedly instead of individually for each file.
Here's an example:
I drop 5 files on the view. I leave the view. Meanwhile 2 files have completed upload progress. The processId for file 1 was "0123" and the processId for file 2 was "0124". I then re-enter the view. This script is ran again. The remaining files are all assigned processId 0124.
I'm sure this is happening because the script is being ran any time you enter the view and something is being overwritten, but I've yet to find a solution.
You can see within the uploader.fileAdded area, that I create a random series of int called a processId with this line
var processId = process.createProcessId(file.index);
Then below, within BeforeUpload, I assign that processId to a multipart_param so that I can assign a unique processId to each upload.
uploader.settings.multipart_params.processId = file.processId;
The Script
/* detects when a user drags files from the desktop */
initDragDetector:function(){
var runtimes = ui.getUploadRunTimes();
var tmpId = Math.random();
uploader = new plupload.Uploader({
runtimes :runtimes,
max_file_size :'500mb',
url :jQuery('#upSrvUrl').val(),
drop_element :'uploadOverlay',
browse_button :'uploadOverlay',
filters : [
{title : "Image files", extensions : "jpg,tif,png,psd"},
],
max_file_count :100,
multipart_params :{rnd_id:Math.random(),tmp_sid:tmpId},
multi_selection :true,
file_data_name :'upfile_0',
});
//INITIALIZATION HANDLER 1
uploader.bind('Init',function(up, params){
uploader.settings.multipart_params.mount = jQuery('#mount').val();
uploader.settings.multipart_params.publisherId = jQuery('#publisherId').val();
uploader.settings.multipart_params.upload_range = 100;
if(uploader.features.dragdrop){
var el = jQuery("#uploadOverlay");
el[0].ondragover = function(event) {
event.dataTransfer.dropEffect = "copy";
};
el[0].ondragenter = function(e) {
if(e.dataTransfer.types.length < 4){
el.show();
}
};
el[0].ondrop = function() {
if(jQuery('.photoThumbContainer').length > 0){
el.hide();
}
};
}
});
//FILES ADDED HANDLER 2 (called after a drop of files)
uploader.bind('FilesAdded', function(up, files){
var i = 0;
plupload.each(files, function(file) {
file.index = i;
uploader.fileAdded(file);
i++;
});
uploader.start();
});
//inject the file into the interface (before before upload function)
uploader.fileAdded = function(file){
var processId = process.createProcessId(file.index);
//added to the file object and passed into the registration
file.processId = processId;
};
//BEFORE EACH UPLOAD HANDLER 3
//Note: this has to be here for any variable passed that changes per file. For example the processId.
uploader.bind('BeforeUpload',function(up,file){
var processId = file.processId;
var photoDiv = jQuery('#photo'+processId+' .photoThumbDiv');
var image = jQuery(new Image()).appendTo(photoDiv);
var preloader = new mOxie.Image();
preloader.downsize(100,100);
preloader.onload = function() {
var img = preloader.getAsDataURL();
jQuery('#photo'+processId+' .photoThumbDiv').html('<img src="'+img+'">');
};
preloader.load(file.getSource());
uploader.settings.multipart_params.processId = file.processId;
});
//PROGRESS HANDLER 4
uploader.bind('UploadProgress',function(up,file){
var processId = file.processId;
var pb = collection.getProgressBar(processId);
if(file.percent<100){
var progress = file.percent;
pb.html('<div class="progressBar"><div class="progressBarColor"> </div></div>');
jQuery('#photo'+processId+' .progressBarColor').css({width:progress+'%'});
}else{
pb.html('<div class="loaderSmall"></div> Processing');
}
});
//FILE FINISHED HANDLER 5
uploader.bind('FileUploaded',function(up,file,info){
var processId = file.processId;
var fileName = file.name;
file.fileName = file.name;
var params = file;
delete params.getNative;
delete params.getSource;
delete params.destroy;
ui.request('registerFile','Photo',params);
//ALL COMPLETE
if(uploadedCnt == up.files.length){
//uploader.splice();
uploader.refresh();
}
});
//GENERAL ERROR HANDLER -
uploader.bind('Error', function(up, err) {
switch(err.code){
case plupload.FILE_EXTENSION_ERROR:
fileExtensions = '';
jQuery.each(up.settings.filters.mime_types,function(index,up) {
if(fileExtensions==''){
fileExtensions=up.extensions;
}else{
fileExtensions+=","+up.extensions;
}
});
var isOrAre = (fileExtensions && fileExtensions.indexOf(',') !== -1) ? 'are':'is';
alertBox.msg("Only "+fileExtensions+" "+isOrAre+" accepted. Please try again.");
break;
case plupload.FILE_SIZE_ERROR:
alertBox.msg("File size can not be larger than "+up.settings.max_file_size+'.');
break;
}
uploader.refresh();
});
uploader.init();
},
Any input is appreciated. Thanks.

If anyone is interested in the solution here, it is because uploader was being set globally. Adding 'var' in front of uploading whenever initializing the uploader fixed it.

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 change a file name and download it when a button is clicked using JavaScript

I have one download button created in JavaScript that links to particular file.
var strDownloadButton = "<br/><INPUT type="button" value="Download" onclick="add()"/>"
window.location.href = "/images/image1.jpg";
I have to rename the file image1 to image2 before downloading, so I use:
<a href="/images/image1.jpg" download="image2" >Download</a>
The problem is that there are 2 download buttons created (HTML5 download attribute created 1 more).
Is there any way to use the same button created by JavaScript, and refer into download attribute?

I have no idea what are you doing Brad Christie,
<a id="download" href="Chrysanthemum.jpg" download="image2" >Download</a>
document.getElementById("download").setAttribute("download", "image3")
here, you have an element that you want to download, you get the element and change its download attribute.

I'm not 100% sure it'll work, but I've done something like this before to download a resource and rename it using javascript. It does, however, mean the resource has to be on the same domain as the page otherwise you will run into a cross-domain security issue. Also, please excuse the fact that I'm using jQuery, but if you need to go without I'll let you look up how to make a cross-browser AJAX call.
With that said:
<!-- your anchor decorated with data-saveas -->
Download
<!-- wiring it up using jQuery/AJAX/Blob -->
<script type="text/javascript">
// Helper to convert AJAX response in to a BLOB
function dataToBlob(data, mimeString){
// convert data to ArrayBuffer
var buffer = new Int8Array(new ArrayBuffer(data.length));
for (var i = 0; i < data.length; i++){
buffer[i] = data.charCodeAt(i) & 0xff;
}
// http://stackoverflow.com/a/15302872/298053
try {
return new Blob([buffer],{type:mimeString});
} catch (e1) {
try {
var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
if (e.name == 'TypeError' && window.BlobBuilder){
bb = new BlobBuilder();
bb.append([buffer.buffer]);
return bb.getBlob(mimeString);
} else if (e.name == 'InvalidStateError'){
return new Blob([buffer.buffer],{type:mimeString});
}
} catch (e2) {
}
}
return null;
}
// iterate over all the items that are marked as saveas
$('a[data-saveas]').each(function(){
var $this = $(this);
// Get the actual path and the destined name
var target = $this.prop('href'),
saveas = $this.data('saveas');
// make an ajax call to retrieve the resource
$.ajax({
url: target,
type: 'GET',
mimeType: 'text/plain; charset=x-user-defined'
}).done(function(data, textStatus, jqXHR){
var mimeString = jqXHR.getResponseHeader('Content-Type'),
blob = dataToBlob(data, mimeString);
if (blob){
// now modfy the anchor to use the blob instead of the default href
var filename = saveas,
href = (window.webkitURL || window.URL).createObjectURL(blob);
$this.prop({
'download': saveas,
'href': href,
'draggable': true
}).data({
'downloadurl': [mimeString, filename, href].join(':')
});
}
});
});
</script>
Not tested, but should work. Basically, you can go fetch the resource using jQuery and store it in to a blob with an assigned name. If it's able to do so, the link now becomes a custom-named blob resource with the provided name. if it can't the default functionality is retained and the user needs to name it his/herself.

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