Is it possible to upload a file on a secondary page? - javascript

I have a form with a file input which accepts large files. The intention is to upload this file to a remote server.
<input type="file" id="userfile"></input>
When a user chooses a [potentially large] file, I want to redirect to a secondary page (on the same domain) which shows the upload progress along with other information.
I can use the native File API to grab the Blob and read the file with FileReader, but only on the page with the form (the first page). I want to delay this reading/uploading process until the second page.
Is there a way to POST the file reference somehow to the second page, and then upload the file from there? Or is this impossible by design for security reasons? Or, some way to store the file reference in a cookie or local storage to be read by the second page?
I could double POST - first to the secondary page, and then POST/PUT to the appropriate final destination. However, I want to avoid this redundancy, which would cause further delays for the user.

Is there a way to POST the file reference somehow to the second page, and then upload the file from there?
No.
To get this sort of effect, the usual way is to remove the second page from the process entirely and use Ajax for any communication you need to do with the server before uploading the file to the correct place.

Related

Add filesize or hash after URL to get correct caching

I am administrating a web page were we have an HTML dokument linking to PDF-files. The PDF-files gets updated from time to time, but we don't want to change the file names. This means that the users get old cached copies of the files, and have to refresh the files manually in order to get the newest file.
I added the following code to the links:
onClick="this.href=this.href.split('?')[0]+'?'+new Date().getTime()">
This solved the problem were the users got old files, but introduced a problem were the user needs to load PDFs even though they have not been updated. This causes more server load, and longer wait times for the users. Is it possible to get a similar code were the script checks a hash or the file size of the target file and adds that to the URL behind the questionmark? If this is possible I would overcome all my problems.
I dont know where you got access to but i assume you can use php.
So you should append an md5 (generated by md5_file()) as parameter to your string. The parameter will only change, if you upload a new pdf (mtime() will have the same effect)

Upload/download/save image to a local server from a remote server using an Image URL and PHP?

I am building a Discussion Forum as part of a bigger application I am building, the forum is just 1 section of the Application.
For my TextArea fields when posting a new Topic or a Post Reply, I have decided that nothing is as good as the PageDown Markdown Library. It is the same one that StackOverflow uses on all their sites and it works better than many of it's competitors.
The way the library ships though, I am not happy with the default Insert Image functionality. You hit the button to insert an image and it allows you to enter a URL for an Image and then it inserts the proper MarkDown syntax to show the linked image.
This just won't cut it. I need the functionality that you see on StackOverflow! Very similar anyways.
I need it to show a Dialog when you click the Insert Image button, like it does now, but instead of just an input field for a Image URL, it will have 2 filed options...
Upload image from your computer
Insert an Image URL and it will then DOWNLOAD the image from that URL and insert it into the post just as if you had uploaded it from your computer. This is important to not confuse this step. IT should not simply insert the Image linking it to the original Image URL. Instead it will take that URL and download/upload the Image to the same server that the upload from computer option does and then it will insert the NEW Image URL pointing to the newly uploaded image!
Based on some simple HTML like below for a Dialog window with a filed for my Upload from Computer functionality, which I already have working. I need to come up with some JavaScript and PHP that will download/save a remote image to my upload folder on my server when a button is clicked using only the URL that will be inside the URL text input field.
So it will need to do a few things...
Fetch and save an image file to my uploads folder using PHP when the only thing that the PHP function will receive is a URL of the image which could be on the same server or most likely a remote server.
After successfully saving/uploading an image from the URL, the PHP function will return a JSON string with the status/error and if successful then it will also return the actual URL and filename of where the new image is saved on the local server. The JavaScript/AJAX script will receive this JSON response and insert the Markdown syntax for the image into the PageDown editor.
The PHP function will need to ensure that the URL that it is trying to save/download is a valid image file and not some malicious file! Also not simply just some file of the wrong filetype like a non-image file unless we are allowing the file type.
It will be part of a module installed on many dinosaur servers so it needs to work on as many servers as possible too!
From the web
From your computer
I would be greatful of any help, tips, code snippets or anything to help with this. At this stage I really just need to build a nie PHP function that will upload images from a remote URL and also ensure that the URL passed in is a real image file or even better that it is in the allowed file types array!
A couple years ago I had started this but have now lost it and I am starting over and don't remeber much about how I went about doing it then.
The easiest way to download a file from a remote server would be to use copy (http://php.net/manual/en/function.copy.php):
copy('http://someurl.com/image.png', '/var/www/uploads/image.png');
As this function returns a bool, it is easy to determine whether the operation was successful and create a JSON response.
To verify that the file is an actual image, there is unfortunately no way that is 100% sure. It is probably enough to check the mimetype though. You can use finfo for that (http://php.net/manual/en/function.finfo-file.php):
$finfo = finfo_open(FILEINFO_MIME_TYPE);
echo finfo_file($finfo, $filename);
finfo_close($finfo);
For a gif, this would return image/gif for example. You will have to hardcode a list of all mimetypes you want to allow.

Pass File object to background.js from content script or pass createObjectURL (and keep alive after refresh)

My goal is to upload a file in the background task with a file coming from the content script.
I figured it's not possible to pass a File object directly from content script to the background because chrome.runtime.sendMessage JSON serialize the data.
It's possible to pass a string url to the file with URL.createObjectURL, which works. But the URL is tied to the document in the window on which it was created (current tab content script). If I refresh, navigates away, close the tab those urls are destroyed.
Read the entire file with FileReader and keep in memory is not an option because it'll crash the extension on large files.
Questions:
Keep the URL.createObjectURL alive?
Pass File object to background?
Upload a file in the background task with a file from the content script?
Pass file link to popup and submit form there, which then run in background?
You can use a SharedWorker to create a communication channel between your content script and background script that allows you to transfer DOM objects such as Files. For an example, see the code in Does chrome.runtime support posting messages with transferable objects?
A quick test shows that it is indeed possible to send a File to the background, but also shows that its internal state is corrupted: You can read the contents of the file using FileReader, but you cannot upload the file through XMLHttpRequest.
I've found a work-around though: Assuming that your File is stored in the file variable, you can use file.slice(0, file.size) instead of file to get a Blob that is still backed by the file and usable in XMLHttpRequest even after passing it to the background page.

How to pass an uploaded image back to html

The setup I work on is the following: A HTML-page with a canvas element displaying a Processing JS sketch and a form that allows to pass parameters to the sketch using JS-function Processing.getInstanceById(getProcessingSketchId()).setSomeParam();, which works just fine.
The user should also be able to upload an image to the server, the name/path of which is then also handed to the sketch to do loadImage(String path). The file upload (using PHP from here) works perfectly fine as well but now here is the question:
How can I get the name of the uploaded image on the server and pass it to the Processing sketch?
If the form's action tag points to a distinct PHP-file, the site with the canvas sketch is quit (variable $destination not available) or if the form's action tag points to the site itself (being a PHP-site, checking for if(isset($_POST['formSubmitted'])) {), the sketch is restarted losing all the previously changed parameters.
I also managed to have the form submission target to an internal iframe and display the uploaded image there, but that still doesn't solve my problem.
Thanks a lot in advance for any helpful hints!
It sounds like you have the data flow worked out but are struggling because a standard form upload causes a page refresh.
I would suggest using AJAX to post the image to a specific PHP image receiver service. When the AJAX upload is complete, the javascript can then call to the server to fetch the uploaded object and manipulate it as needed without refreshing the page.

Need to do bulk file upload in JavaScript

I have a little bit of an unusual situation I guess. I have a page for placing new orders and part of a new order is a variable (0-n) number of files that are to be uploaded and associated with the order on the back end. The user also needs to specify a description for each file.
I've used a couple jQuery upload plug-ins with great success, but in this case I'm not looking to upload a single file when the user hits "OK." What I really need to do is upload a file by passing a local path to some method that will do the upload.
Does anyone know of any plug-ins that do this?
Thanks!
Ajax Uploader could be helpful? I believe it allows multiple uploads.

Categories

Resources