JavaScript - Upload and save file

Question

0.00/5 (No votes)

See more:

I tried to upload a file through a browser and then save it into a local or network folder. I got the code from http://muaz-khan.blogspot.com/2012/10/save-files-on-disk-using-javascript-or.html[^], but the saved file is a shortcut type. The key function code is below. In this code, the fileURL defines the source of the file, and the fileName is the destination.
I wish someone could provide a good source for this issue. Thanks in advance.

JavaScript

// http://muaz-khan.blogspot.com/2012/10/save-files-on-disk-using-javascript-or.html
function SaveToDisk(fileURL, fileName) {
    if (!window.ActiveXObject) {                // for non-IE
        var save = document.createElement('a');
        save.href = fileURL;
        save.target = '_blank';
        save.download = fileName || fileURL;
        var evt = document.createEvent('MouseEvents');
        evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
        save.dispatchEvent(evt);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);
    }
    else if (!!window.ActiveXObject && document.execCommand) {  // for IE
        var _window = window.open(fileURL, "_blank");
        _window.document.close();
        _window.document.execCommand('SaveAs', true, fileName || fileURL)
        _window.close();
    }
}

Posted 4-Dec-15 2:07am

s yu

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sinisa Hajnal · Answer 1 · 2015-12-04T02:42:00

Solution 1

Check this:
https://github.com/eligrey/FileSaver.js[^]

Excerpt from github:
FileSaver.js implements the HTML5 W3C saveAs() FileSaver interface in browsers that do not natively support it. There is a FileSaver.js demo that demonstrates saving various media types.

FileSaver.js is the solution to saving files on the client-side, and is perfect for webapps that need to generate files, or for saving sensitive information that shouldn't be sent to an external server.

Looking for canvas.toBlob() for saving canvases? Check out canvas-toBlob.js for a cross-browser implementation.

Posted 4-Dec-15 2:42am

Sinisa Hajnal

Comments

s yu 4-Dec-15 10:34am

SH: Thanks for your response, which is identical in content as the README of https://github.com/eligrey/FileSaver.js[^]. However, no matter how I did, I can only save the shortcut rather than the file (in pdf). Could you provide your solution more clearly? Thanks again.

Sinisa Hajnal 4-Dec-15 16:31pm

I could copy their example if you think that will help. I think you should try it before rejecting it out of hand. Do you get shortcut in IE too? Do you see any errors or warning in console? Did you check network traffic (that is, can you see the request for the file)?

And yes, it identical in content, that is what "excerpt" means - it is a text quote.

s yu 8-Dec-15 8:37am

SH: Thanks for your response. I downloaded the source code and tried. It works well in general. However, I am still not clear how it can be used in my app. I got the several problems as listed below. Hopefully, you can provide me additional hints/advisories:
1) The file is saved into my C:\users\...\downloads. How to revise the path to the desired destination folder? I reviewed the FileSave.js, but could not figure out where the path can be defined.
2) This tool runs well on FireFox and Chrome but not on IE9. When I run it on IE9, I received 'IE restricted this website from running scripts on ActiveX controls.' After I clicked 'Allow blocked content', and then clicked the save button, the file could not found in the c:\users\...\Downloads\ folder.
3) The file I am going to save is 'pdf' format. I guess the 'pdf' files should also be able to saved, right?
Thanks again.

Sinisa Hajnal 9-Dec-15 2:28am

1) You'll have to read the documentation, I don't know out of hand and can only read just as you can
2) Older IE are often problematic. Check that you're not running IE 9 in compatibility mode with even older versions. IE 9 is first "modern" version of IE and often works properly, but is also often in compatibility mode
3) Yes, it should, unless you change the name