What's the common way to handle AJAX file uploads/preventing orphaned files? - ajax

I'm planning to use FineUploader.js to give my users the ability to drag 'n drop images, select multiple at once, etc... and, maybe more importantly, have the image uploading while they complete the rest of a form.
I'll be using the ASP.NET MVC/.NET 4.5/C# platform for this project.
What if the user don't complete the form? If they actually hit a cancel button I could probably fire a command to delete the images that have already uploaded. What about if they simply close the browser?
How to prevent files from being uploaded, but not used?

Related

Workbox refresh button just one directory

im new here (just start to learn js for this job and my english is not very good) and i'm having some trouble to find the right way to do this.
I'm working on a PWA that will have two main purposes, the first one is to show some html dashboards (one of the htmls dashboard files will be in this path /dashs/dash_geral.html) and the seccond one is to show some lists (e.g: one of them would be in this path /listas/listas_propostas.html), and the goal is to work offline (using cacheFirst strategy).
The problem is that i would want to reload just one folder of my two paths, i can do a "refresh all" in my index.html, but I would want to do it in another pages too, and in one page, i would refresh just one folder, in another page, i would refresh a seccond folder.
My scheme is something like this:
Index.html -> Install sw. Im my index.html body i have 2 big buttons, one to redirect to graphs (/graphs.html), another button to redirect to lists (/listas.html).
If i click in "graphs", i will be redirected to /graphs.html, and there i will have a topbar with a refresh button, one iframe to show different graphs (one of them is /dashs/dash_geral.html, so, when i call graphs.html he will use one of the dash htmls that i generated, i.e /dashs/dash_geral.html) and a navbar to navigate between another dashs (for example, if i click in "negocios" my iframe would load /dashs/dash_negocios.html).
my graphs.html
My goal is to click on refresh button, and update my cache of /dashs/, ie, update my dashes from server to cache.
And do the same if i click in button lists, i would have the same structure, go to /listas.html, having a couple of htmls in /listas/ to navigate with my navbar, and if i click on reload i would want to refresh just that folder (/listas/*) on cache.
I already saw the advanced recipe to create a refresh button for clients, but i want two different refresh buttons with slightly different behaviours (one would "recache" /dash/, and another /listas/.
Besides that, my graphs.html and listas.html are not installing the sw.js, so i shouldn't have access to the main service worker if i'm not in my index.html page, right?
Okay, so, first of all I had misunderstood some stuffs.
I didnt understand before that, firts, if the connection drop, he will continue from the point it stopped (in precache strategy).
Seccond point i didnt understand, is that he will "listen" to all children folders inside scope, i thought that only if I went back to my start_url he will be called again.
I used revision parameter in precache solution to deal with files updates, i actually generate a new SW (with another program) an just change a few lines (the constants used in revision parameters) to update my files.
With those to points working, I can actually work with my app without a reload button, since every time i navigate between pages, he will be listening and recaching updates.

Disable Drag and Drop programatically - fine-uploader

Once a user has uploaded a file via any means (file selection, DnD or Cut and Paste), I would like to disable the Upload widget, to prevent users to upload again.
This disabling should be done for a specific upload widget since I may have many on the same page.
Is there a method I can call to do this?
Thanks.
Simply present an alert/message to the user in your UI once they are no longer able to upload additional files (which you should do no matter what) and then return false in your onValidateBatch handler for all subsequently dropped/selected files. This will prevent files submitted via the file chooser, file submitted via DnD, AND pasted images from being uploaded.

Uploading and saving images in mvc 3 before post

I have a problem with images in my web app. let say I have a form where there are some text fields, dropdowns, upload ajax control for multiple image upload and button Save.
I know how to upload images and posting a form and saving everything to database but the problem is that I want to achieve the following user experience:
User can upload multiple images and browser after successful upload shows thumbnail (this I know how to do it)...the problem here is that I do not want to save images to db before button save is pressed. Is there any convinient how to save temporary images...I have tried temp table which after button is pressed, copies all images to image table but here is browser refresh problem that looses all the data and images stay in a temp table. Can you use a session for storing temporary images or any other way (I think session is not particulary good idea for such things.)
One easy way to achieve that is to use the HTML5 File API and display a thumbnail once the user selects a file to upload. You don't even need to waste bandwidth as everything happens on the client. Once the user submits the form, then the image will be uploaded to the server.
Another possibility is to use one of the gazillions of available AJAX upload controls such as Uploadify, Valums Ajax Upload, Uploadify, the jQuery form plugin, ... which will allow you to upload the file to the server using an AJAX request so that you can resize it there and return the resized image to the client that you could display the thumbnail on the client.

Access to other control values when AjaxFileUpload fires UploadComplete event

My understanding is that the AjaxFileUpload object uses an iframe to upload files. A postback occurs, but no other controls are posting back - at least that is what it looks like to me as I cannot access any other controls' data.
The purpose of the app is to allow the user to upload a file. It will then modify the contents of that file and save the results to the server. The problem is that it needs some extra information to make the modifications, and therefor needs the information that the user entered elsewhere on the page.
The only solution I have been able to come up with is to do a postback every time one of those other controls is modified, which affects the apps responsiveness. I have been looking for a couple of days for another solution.
Does anyone have any ideas? The best case solution would allow me to access all of the data I need when the AjaxFileUpload control does a postback.
you could have a ajax function that is reading changes from time to time external data, and update the information displayed, similar to email alerts, sorry for my English.

Firefox addon - is it possible to capture text/html from the webpage?

I have never wrote a firefox addon so I am wondering if this can be done. Is it possible to continually scan a webpage for certain text, and then if that text appears, capture it and save it to a file?
For example
Say a user is on amazon and adds a few items to their shopping cart.
They click checkout and fill in their details and click submit order.
When the order is processed the user is shown the text 'Order complete' and given a receipt of their purchase.
In this example I would like to keep scanning the webpage until 'Order complete' appears. Then I want to capture the html of the receipt and save it to a file.
Is this possible with a firefox addon?
From my experience as a Firefox user, this is definitely possible. As a matter of fact there are add-ons that do far more than that.
For example, Greasemonkey can actually act as a filter and change the content of a viewed webpage as specified by a user script. Zotero and AlertBox are able to selectively watch specific HTML elements for interesting information and act upon it.
It is also quite possible that there is an existing add-on that either does what you need already, or can be used as a basis for a custom add-on of your own - what you are asking for is not all that unusual...
You probably want to create your add-on with the Add-on SDK. You can then use the page-mod package to attach a content script to Amazon pages. The content script should check whether it got loaded into an order confirmation page - and send the HTML code of that page (probably document.body.innerHTML) back to the extension.
The extension then needs to write the data to a file. You need to use internal API for that, something like this:
var file = require("file");
var writer = file.open("c:\\foo\\bar.html", "w");
writer.writeAsync(data);
If you want the user to choose the file name, you can do this using chrome authority and nsIFilePicker component.

Resources