Dropzone.js: Custom file browser - add file that's already been uploaded - javascript

Before you start tutting, this isn't the usual 'can't load my files from the server' post...
I want to give users the option to see files on the server already in a bootstrap modal, then allow them to select given files. On selection, I want to close the modal and send them to dropzone to load in.
I'm sure mockfile is the way to go. I'm just not sure where to start.
how do I pass image URLs to dropzone programmatically? I don't think I want to get dropzone to re-initialise as if they click 'browse files' more than once, then they will loose previous images.
I hope I have explained myself ok. I can't see an 'addFiles' option and am not sure how to pass mockfiles after the dropzone has been loaded.
Any ideas?

var mockfile = { name: fileName, size: fileSize };
dropZoneObject.options.addedfile.call(dropZoneObject, mockfile);
dropZoneObject.options.thumbnail.call(dropZoneObject, mockfile, fileImageURL);
Ofcourse you replace filename, fileSize and fileImageURL and add as many files as you have on the server.

Related

Custom Upload Images using CKEditor, BLOB field and Rails 4

I'm currently using CKEditor in my site. The user may upload some images to the server using the button for Upload Image in the CKEditor.
There is a textarea field with id #article_conteudo on the page that uses the CKEditor, here is the javascript code to configure the editor:
CKEDITOR.replace('article_conteudo', {
filebrowserImageUploadUrl: '/article/upload/'
});
The URL /article/upload/ points to a method file_upload in an articles_controller:
def file_upload
image = ArticlesImage.new
image.imagem = params[:upload].read
image.save
end
The images are stored in a BLOB field in a MySQL Database.
The images are saved in the database with no problems. But, after saving, nothing happens in the Editor. I'm not sure what is the expected response for the Upload Action of the CKEditor on this case. I'm not sure, also, if CKEditor uploads support the use of BLOBs.
How can I implement this functionality in my project?
If it can't be done with CKEditor, is there any other plugin that can do it?
Thanks for your help
PS: The use of BLOB is MANDATORY for the project, I cannot use other methods
it depends of what you need.
If you want to display images on your browser, you have to create the JSON response involved.
And then, the fileUploadResponse of the CKEditor would be able to display your images (or files) on your editor.

Fineuploader : how to replace uploaded images?

I'm using fine uploader to upload images. After I upload an image, I need to be able to upload another image to replace the uploaded image before and only allow one image at one time. Is there any options for that or should I delete the upladed image before I start uploading the new one?
This is what I would do:
Set the multiple configuration option to false. This will be most helpful if you are using the UI built into the Fine Uploader library (and not a custom UI or React Fine Uploader. In that case, after a file has been submitted, subsequent files will "replace" that initial file in the UI.
Remove/replace the item on your server when handling the upload request if a file for that user already exists.
This is making a lot of assumptions as you have provided very little information about your situation or setup. This should get you started down the right path though.
End up deleting the uploaded images before uploading a new one:
onValidate: function() {
this.deleteFile(avatar_id);
}

Is it possible to detect file extension change with Javascript during HTML upload

I have a hypothetical question. I currently am using AngularJS in my application and I am using a third party module, ng-file-upload, for file uploads. Now obviously I can check the file extension of the uploaded file and exclude it / prevent it from being sent to the server should it be undesirable, for example I only wish to allow the upload of images and the user uploads a word document. However I was thinking. Should a malicious user change a file from say "nastyfile.exe" to "nastyfile.gif" the malicious file would pass my check/validation using the File.type property as the File.type would be image/gif. To my knowledge there is no way on the frontend I could check if the original file extension has been modified using JavaScript. Is this the case or is there a way to determine this?
Thanks in advance.
Try to create an image.
Then listen error & load event if load trigger, it is an image, else if error trigger it is not an image ;)
var img = new Image();
img.onerror = function() { /* not an image */ }
img.onload = function() { /* it is an image */ }
img.src = 'PATH/FILENAME';

How can I ensure that attachment filenames don't cause problems?

I'm working on an ASP.NET MVC site where users are supposed to be able to upload images and PDF documents and view them at a later point. I noticed that certain filenames cause the attachments not to show.
I'm using Dropzone.js to provide a drag and drop field. The files are saved by a controller method using HttpPostedFileBase. When a user opens the gallery view, the respective controller method lists all previously uploaded files (filenames) in a ViewBag entry. The view then creates a thumbnail for each image:
foreach (var path in (IEnumerable<string>)ViewBag.Attachments){
...
<img class="attachments-thumbnail" style="cursor: pointer" src="#Url.Content(path)" alt="" />
...
}
Now when I upload an image with the filename h &.jpg, the thumbnail isn't shown. In Firefox, the console shows the error X GET http://localhost:54305/Content/Images/Attachments/1/h%20&.jpg. So it's looking for h%20&.jpg instead of h &.jpg, even though the file was saved to the server as intended as h &.jpg.
On the other hand, when I upload a pdf with the name radio%2E11%2E3%2E1852937.pdf, this again gets saved with its original filename, but this time the error appears the other way around: X GET XHR http://localhost:54305/Content/Images/Attachments/1/radio.11.3.1852937.pdf.
I'm not sure where this happens. When I use the inspector tool, the thumbnail <img> tag points to the correct filename, i.e. the one present on the server. I imagine this must be a very frequent use case, so is there any C# method that makes a filename safe for web use or will I have to rename the files myself? Ideally of course I'd like to keep at least the filenames of the pdfs the way the user chose them, as they may indicate file content, but it seems to be unsafe..

How to add files that were loaded earlier to DropZone.js

Got a really interesting (for me) problem.
I have a dropzone.js plugin installed and now I need to put some files there... from php.
What I am trying to do:
php script detects, that there are some files (in directory) that were loaded earlier (for example, few days ago). (I know the names of this files).
After that, I have to pass this files to my javascript script which will add them to dropzone so user could see files that he uploaded earlier.
And all of this using Ajax.
I understand, what to do with step 1 (I can find those files). But how to pass it to js and then add to dropzone?
Or am I thinking wrong? Help me please.
Dropzone has a wiki page explaining that.
Here is how I've recently done that by getting file URLs from REST API:
$.get('http://api.to.return.files', function(data) {
$(data.photos).each(function(i, photo) {
var mockFile = { name: photo.name, size: photo.size, accepted: true, id: photo.id };
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, photo.url);
myDropzone.emit("complete", mockFile);
myDropzone.files.push(mockFile);
});
});
If you already have your files urls in the script, use them instead of API response in my case.

Categories