Best file upload approach - javascript

So, what do you guys recommend to start off from in order to achieve the functions below?
Multiple image file upload
Resize(compression) images
Upload them via ajax (automatically) even before the form is submitted.
First image is the "main" featured image, and others are given custom post meta
For multiple images, there are radio buttons which users can choose which one becomes the main image.
Once form is submitted, any changes (if user changes the main image) will be updated.
I tried to build something from scratch but it is taking too much time.
Any suggestions will be much appreciated.

My way:
1.Use plugin for multiple ajax upload
2.Plugin for resizing images
3.Change main image trough ajax

Related

How to get the file uploading progress percentage of an external input?

I built a file upload input on an HTML page, and I am now trying to get the current status of every upload made on this input.
Note that I have limited possibilities on the input, as the page is built on a no-code tool, so the best for me would be to use an event listener on the input ID to trigger the script that will retrieve the upload progress.
Is it doable? If so, any guidance is greatly appreciated :)

How can I remove specific images from a file input?

I am creating a product registration using php and using vanilla js to get the selected images from the file input and preview them in the screen. Now I want to provide a way for the user to remove unwanted images before submitting the form.
The form has the images and other inputs for the title of the product, description, price and category selection.
I have seen so far in many places people telling that you can use a dataTransfer object to store the images and remove from the dataTransfer and after making the file input (=) the dataTransfer but none of the answers I've found so far have worked.
Is there a way to remove images from the file input once they are selected?
#CBroe I'm talking about Data Transfer in js (https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer). Thank you for your comment. If it's not possible to remove files from the filelist of the file input I will have to store those data somewhere and create an arbitrary submission of the form.
Thank you
#RiggsFolly the user clicks on the file input <input type="file" multiple> and selects (let's say) 4 images. These images are read by the js script and displayed on the screen, as a preview. I want to provide a small garbage icon on top of each image and let the user be able to remove specific images.
I wanted to know if it's possible to remove the selected images from the files inserted on the file input. Then I would remove the image using the name of the file as reference (or any other reference). I just never found a way to remove files from the input file.

How to upload image in CKEDITOR with a Django backend?

I have done proper research of many image plugins which upload images to server using php scripts.I just want to know a proper way to upload images to a django-based server.
Here's I think what a approach should be -
On clicking a toolbar button,a dialog will be opened.UI elements of the dialog will include a form with a file type,two fields for height and width and a button (upload to server).On adding a image file and fields and clicking upload button,ajax call will be sent (am i right here? or form submit should handle it.) to the server where a particular view will handle saving image to a specified folder.
On success server will return the full path of the image and dialog will insert in the editor.
Sorry if my question is very naive but I just wanted to know if my assumptions are right before starting off.
Thanks
There is a Django package
https://github.com/django-ckeditor/django-ckeditor
This comes with a demo app. I would advise to look into that, and see how it works.
Basically you will have to configure the media url and there is a setting for ckeditor where to upload the media. Ckeditor will handle the image upload for you.
Uploaded content will be show in an overview page, where you will have the option "use image in text"

adding a watermark only to target images (jquery)

I have a question regarding watermarks for images. For instance: I want to display an image (pure HTML). If a user clicks on the image however, there should be a watermark, showing where that photo comes from.
I was thinking about a layer-solution. Putting an invisible layer over the main image and link to another image instead. That would force me to have every photo two times on my server. Not the best idea.
I found a lib called watermark.js (link here: watermark.js).
However, this would only allow me to put watermarks right in the beginning.
To explain the situation: User on my site sees everything without watermark, opening it directly in the browser should add the watermark.
Another solution I had was to always apply a watermark via script, and remove it if the user is currently on my site.
Maybe you have a solution to apply watermarks only on the linked images. I'd like to realize it via jquery.
Thank you in advance.

Magento - Simple Configurable Products Extension

I'm using the Magento SCP extension to change various details on the product page when selecting an option in the configurable product.
I need to extend the functionality so that I can change the description, image etc when clicking on a thumbnail image instead of changing the list options.
As far as I can tell, the function that deals with the changing of product description etc is:
Product.Config.prototype.reloadPrice
I'm not sure how I can run this when I click on a thumbnail, what information do I need to pass to the function to run properly?
Take a look at this site I am working on, this is using bundle products. But I am just looking to get an idea of what you are trying to do..
Click on the individual products to see them load below your selection
Let me know if this is what you are looking to do and I can help guide you
Site Example
The site I am demonstrating is using a custom route I load via Ajax.
I figured it out in the end.
When changing the dropdown values from clicking on an image elsewhere in the page I need to run the following code:
spConfig.configureElement(element)
Where (element) is the Dropdown's ID which I stored in a VAR further up the page.

Categories

Resources