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);
}
Related
I'm using ngx-dropzone in Angular to upload a profile picture with drop zone, but I want the user to upload only one file instead of multiple. Is there a way using ngx-dropzone?
Here you can see the demo:
https://stackblitz.com/edit/ngx-dropzone
You could just disable multiple files upload. Like code below.
<ngx-dropzone [multiple]="false" (change)="onSelect($event)"></ngx-dropzone>
I have an app, that allows users to upload an image, crop it and with other data save it all as html file to be used as a footer for emails. The image is given to them as base64.
Howver turns out this is not supported by Outlook, since it doesnt accept b64 data as img source.
So my idea was to save the cropped image to a file, let's say /public/avatars/avatar.png and link it's directory as a source. However I'm having trouble finding a way how to save images to to a file using JS. My allowed stack is JS and React, no node.js.
How would I do that? I can have the file as either b64 ot canvas element, so i'm flexible here, as long as it's saved to file.
I'm open to other solutions too.
You can't save a file with client language only. You have to save it to a server, own server or external server or a service like AWS.
The best solution without server-side (strangly) is to use a API for save image and get link from this API. Then you can use this link to Outlook.
You can use https://aws.amazon.com/fr/cloudfront/ free for one year with 50Go and 2 millon request monthly.
If you do not exceed 300,000 images per year you can use this service : https://cloudinary.com/pricing
You can also use https://www.deviantart.com/developers/ but that's not really the point of service.
Weird solution :
Be careful, the login and password of your FTP user will be available in the source of your code. Minimum rights must be administered.
You can use this script for talk to FTP server from JS (not tested but seems worked) : http://www.petertorpey.com/files/ae/scripts/FTPConnection.jsx
You can try something like that :
var ftp = new FtpConnection("ftp://URL") ;
ftp.login("username", "password");
ftp.cd("FOLDER") // For move to folder
ftp.put(file,"FILE.PNG") ; // File must be a File JS Object
ftp.close() ;
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.
I'm setting up a typical profile picture upload and crop feature for a site. I'm looking at how others have set it up and I see that many are managing to have one input type="file" and it not only allows for selecting a file but also calls the PHP or JS to display the image.
I'm completely stuck on how to make it do something after the image has been chosen.
Does any one have a link or suggestion on how to perform this?
One way you could achieve this is to convert the file into a blob, then present it using an HTML5 canvas. Example: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Another option is to issue an AJAX request after the file input has been changed. Do whatever server processing you need to (crop, save, etc.) then return the AJAX call a path to the file. Then just append a new <img src='filepath.jpg' /> to the DOM.
I would upload the image using AJAX, having a API receiving the image. When image has been saved the API-method returns the path of the image.
You can then display the image using the path you recieved from your API-method.
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.