There is any way to save image/pdf content into local file system applicable for all browsers

Question

I got image content by ajax response in an array buffer.appended that array buffer to blob builder.now i want to write these contents to a file.Is there any way to do this..? I used windows.requestFileSystem it is working fine with chrome but in mozilla not working.. here is my piece of code ,

function retrieveImage(studyUID, seriesUID, instanceUID, sopClassUID,nodeRef) {

     window.requestFileSystem = window.requestFileSystem||window.webkitRequestFileSystem;
var xhr = new XMLHttpRequest();
var url="/alfresco/createthumbnail?ticket="+ticket+"&node="+nodeRef;
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
    if(this.status == 200) {
        window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
            var fn = '';
            if(sopClassUID == '1.2.840.10008.5.1.4.1.1.104.1') {
                fn = instanceUID+'.pdf';
            } else {
                fn = instanceUID+'.jpg';
            }

                    fs.root.getFile(fn, {create:true}, function(fileEntry) {
                     fileEntry.createWriter(function(writer) {
                     writer.onwriteend = function(e) {
                        console.log(fileEntry.fullPath + " created");

                    }
                    writer.onerror = function(e) {
                        console.log(e.toString());
                    }

                    var bb;
                    if(window.BlobBuilder) {
                        bb = new BlobBuilder();
                    } else if(window.WebKitBlobBuilder) {
                        bb = new WebKitBlobBuilder();
                    }
                    bb.append(xhr.response);

                    if(sopClassUID == '1.2.840.10008.5.1.4.1.1.104.1') {
                        writer.write(bb.getBlob('application/pdf'));
                    } else {
                        writer.write(bb.getBlob('image/jpeg'));
                    }
                }, fileErrorHandler);
            }, fileErrorHandler);
        }, fileErrorHandler);
    }
};
xhr.send();

}

Answer 1

The script of a web page is not allowed to write arbitrary files [such as pdfs] to client's storage. And you should be thankful because that means that web pages have a hard time trying to put malware on your machine.

Instead you should redirect the user (or open a new window/tab) to an url where the browser can find the content desired for download, and let it handle it. Use the header to tell the client to download it or displayed as explained here.

If you need to create the downloaded content dynamically, then manage it on the server making it an active page (.php, .jsp, .aspx, etc...). What matters is to have the correct MIME type in the header of the response.

Note: yes, I'm telling you to not use ajax, just window.open. Edit: I guess you may want to present the images in a img, in that case, it is the same, just put the url in the src attribute and have no ajax. Only some javascript to update the attribute if appropiate.

---

Given your comment I understand that you want:

1. To cache the image in the client to avoid to have to get it back from the server every time.
2. To allow the user to customize his experience allowing the use of images from local storage.

Now, again for security reasons, arbirary access to client's files is not allowed. In this case it works both ways: first it prevents the webpage to spy you, and second it prevents you to inject malicious content on the page.

So, for the first part, as far as I know the default is to cache images [this is handled by your browser, and yes, you should clean it from time to time because it tends to grow]. If that is not working for you, I guess you could try use a cache manifest.

About the second, the usual way would be use local storage [which, again is handled by your browser, but is not arbitrary access to client's files] to store/retrieve the url of the image and use it present the image.

The image can still be saved at the server, and yes, it can be cached. To get it to the server - of course - you can always upload it with <input type="file" ... /> and you may need to set enctype to your form. - You already knew that, right? - On the server, store the image on a database (or dedicated folder). Now the page that is resposible to retrieve the image should:

• check the request method
• check user's permissions (identify it by the session / cookie)
• check the parameters of the request (if any)
• set the header
• output the file got the database (or dedicated folder)

---

Now, let's say you want to allow this to works as an xcopy deployable application (that just happens to run in a browser). In this case you can always tell the user to store the images he want in a particular location and access them with a relative path.

---

Or - just because - you are hosting in a place were there is no chance of server-side scripting. So you got to go along only with what javascript gives you. Well, you cannot use relative path here, since it is not local... and if you try to use a local absolute path, the browser will just diss you (I mean, it just ignores it).

So, you can't get the image from a file of the client, and you can't store it on the server...

Well, as you know there is a working draft for that, and I notice it is what you are trying. The problem is that it is a working draft. The initial implementation gets staggered by the security issues, to quote Jonas Sicking:

The main problem with exposing this functionality to the web is security. You wouldn’t want just any website to read or modify your images. We could put up a prompt like we do with the GeoLocation API, given that this API potentially can delete all your pictures from the last 10 years, we probably want something more. This is something we are actively working on. But it’s definitely the case here that security is the hard part here, not implementing the low-level file operations.

So, I guess the answer is "not yet"? In fact, considering Microsoft's approach of only providing the parts of the standardar that reach recommendation status, and also its approach of launching a new version of IE each new version of Windows... then you will have to wait a while to have supports in all the browsers. First wait until FileAPI reaches recommendation status. Then wait until Microsoft updates IE to support it. And if, by any chance (as it seems will happen) it will be only for IE10 (or a future IE11) and those deosn't work on a Windows before Windows 8, you will be waiting a lot of people to upgrade.

If this is your situation, I would suggest to get an API for some image hosting web site, and use that instead [That will probably not be free (or not be private), so you could just change your web hosting already].

Answer 2

you cant have a common way to store the response in files compatible with all the browsers , there is a way , u can use FileReader in javascript but that again wudn't work on IE either .

I had the similar prob a few weeks ago , what i did was i made an ajax request to a server passing the content , the server stored the content for me in the file , then it return a reference to the stored file.

i stored my files in a temp database table and the server action returned the id for the file by which we can access the file from database whenever we want.

you can also store your files on the server in some thumbnail , but i prefered database.

if u need any more specification , let me know