Jquery drag n drop file loading progress - javascript

I am building file uploading/drag and drop.
I used this jquery plugin: https://github.com/jaysalvat/ezdz
Dnd is working well, but I just wanted to upload huge size of the file, over 1GB.
When I drag and drop the file into dropzone, it always takes too long time to load the file in the browser(not upload - didn't click "upload" button. Just loading to the browser to load that file.)
So, I just wanted to check this progress(loading file to the browser). This is not checking uploading progress, I think this is something different with checking file uploading progress.
Is there any solution to check this?

Related

Prevent file preview Images when dragging/dropping files over browser

I want to handle a custom Image from my react-code when a user drags files over my App.
I know there is setDragImage, but I think this is for elements inside the App, because it only can be called with onDragStart, which won't get triggered when I move a file from a file-explorer over the app.
So in other words: how to get rid of this picture when moving files over the browser:
I dont want this
If this only can be achieved within the browser, how to do this with WebView2 / WebKit?
Thanks a lot! :)
I tried DataTransfer.setDragImage() with an empty image, but the problem is onDragStart did not get triggered because the drag operation is coming from "outside".

Dropzone upload in background (PHP)

I'm trying to upload multiple large files at once with Dropzone. I want to do so in asynchronous way.
It means, when I drop the files into Dropzone I want all of them to start uploading right away and at the same time I want to be able to leave the page (while uploading still continues).
When I drop multiple files now, they start to upload, but I cannot change the page immediately - the browser is waiting for the first file to be uploaded, then it finally goes to another page.
Is it possible to do the above with Dropzone? Is there some other way how to do this in PHP? Thank you.
I want all of them to start uploading right away and at the same time
I want to be able to leave the page (while uploading still continues).
Leave the page while uploading isn't possible.
A solution would be to use a singe page application, so you have never to reload the hole page. If you only change the content, it is possible to sill upload the content.

Jasny Bootstrap File Upload Image Preview Not Working

I have recently noticed that the file upload image preview on my site is not working. It previously did work. The current state is that the Select Image prompt works, asks you to select a file and, if you submit the form, it actually adds the image into the DB. However, the stats prompting the image preview and interactive buttons (change/remove) do not work.
What makes this problem specifically difficult is that I cannot see any specific javascript errors associated with the file and the plugin file itself loads from the S3 server.
The image previews can be found: https://www.rigsandwagons.com/listings/add/

executing code after download starts

I would like to add an animated loader image, which would appear after the user triggers downloading of an attachment, and disappear after the download actually starts - when the browser starts downloading the file (or displays the download confirmation dialog). The reason for it is that the attachments are quite complex documents generated on the server side, which takes some time and an animated loader would reassure the user that the page is working (and disable the download button until the download starts).
The attachment has properly set Http headers.
Here is what it looks like now:
var link = $("#download-link");
link.click(function () {
link.displayLoader();
$(document).load(link.attr("href"), function () {
link.hideLoader();
});
return false;
});
The main problem is that the load method obviously doesn't do what I would like to achieve. Is there a way to capture the actual start of downloading, triggered by window.location change?
You can do is.
Disable the whole screen until the Download is ready ( the server side processing).
And the user clicks a button download and the user directly downloads the file.
Approaches followed by most of the downloading website.
eg. Mediafire.com
PS: Disable the whole screen mean a System type dialog. disabling other options.
Why don't you show the loader image first?
If I understand correctly now, the problem is that you want the loader image to disappear once the file begins to download, and at present it disappears once the file has finished downloading?
I don't think there's an easy way to do it with jQuery, but if you drop down to using the normal JavaScript XMLHttpRequest object directly, you will get several callbacks at various stages of downloading that you can access through the readyState property.

HTML5 drag and drop upload - how to limit only local files

I'm working on an HTML5 image drag-and-drop project and encounter a problem:
If a user drag an image that is already on the page, the onDragEnter/onDragOver events are still triggered.
Is there a way to trigger the event only if the file comes from the local computer (drag from desktop, folders, etc.), not from the page itself?
Could you set the draggable attribute on all page images to false?

Categories