I wanted to allow user to modify a zip file which they uploaded and then submit it to the server. My UI is made using react js and I am using JsZip library to do it.
var zip = new JSZip();
let myZip = null;
zip.loadAsync(f).then( zipFile => {
Object.keys(zipFile.files).forEach(filename => {
zip.file(filename, text);
myZip = zipFile.generateAsync({type : "string"}).then(function (blob) {
myZip = new File([blob], "hello.zip");
});
;
})
});
Note:The zip has just one file at entry level. Rest are inside a folder.
Problem is that I am unable to create the final zip using generateAsync function. The myZip object is null.
Any help is appreciated. Thanks.
Thanks for the help. I solved it by changing the type from string to blob in the generateAsync function.The documentation was a bit unclear about the list of possible "type" and their uses. Instead of creating a string then a File object out of it, this allowed me to directly create a blob and use it in my POST request.
Related
As the title, can I do that? upload multiple images to the browser and zip it to one file using Javascript
please I'm not expecting the answer of code, just wanna know is this possible to do that, could anyone please give me some hints or direction, thank you.
There is one js library that can solve your problem.
here is the link http://stuk.github.io/jszip/
function upload(files){
var zip = new JSZip();
let archive = zip.folder("test");
files.map(function(file){
files.file(file.name, file.raw, {base64: true});
}.bind(this));
return archive.generateAsync({
type: "blob",
compression: "DEFLATE",
compressionOptions: {
level: 6
}
}).then(function(content){
// here you will get the zipped file, so you can pass this file to the server
});
}
I am developing a website using react.js and admin-on-rest. One feature is allowing users to upload a pdf file.
I get the file as type FILE and want to get the file from FILE, compress it to zip, and then make it to type FILE.
So it should be FILE -> origin file -> zip file -> FILE from zip file.
I tried JSZip but still can not figure it out.
Any help is appreciated. Thanks
You can use JSZIP.
**use npm to install JSZIP
let zip = require('jszip')();
//hoping you have already taken input
let input = document.getElementById('fileInput'); // fileInput is id of my input element
let file = input.files[0];
let allZip = zip.file(file.name, file);
console.log(allZip)
Hi Garrick following are the steps you need to take.
1) handle fileupload in a rest wrapper
https://marmelab.com/admin-on-rest/RestClients.html#decorating-your-rest-client-example-of-file-upload
the above example is for image upload. But you will essentially be doing the same thing.
2)
const addUploadCapabilities = requestHandler => (type, resource, params) => {
if (type === 'UPDATE' && resource === 'posts') {
//use jszip to zip file here and package it however you need
// call the API with zipped file
} return requestHandler(type, resource, params);
};
There is a small app called jszip for this. Try, it would help. https://stuk.github.io/jszip/
I would like to be able to edit a file that has been selected for upload. I want to search and replace text in case absolute files should be made relative...
I notice in the File API I can do some of it, but I get a little stuck:
document.getElementById('exampleInputFile').onchange = function(event) {
var fileToLoad = event.target.files[0];
if (fileToLoad) {
var reader = new FileReader();
reader.onload = function(fileLoadedEvent) {
var textFromFileLoaded = fileLoadedEvent.target.result;
//Use logic to remove absolute files
//Upload S3
};
reader.readAsText(fileToLoad, 'UTF-8');
}
};
I am trying to figure out how now to convert that text to a proper File so that I can upload it to S3 using an existing api that expects something returned by: event.target.files[0] code above.
I do not want the server to handle any heavy lifting here if I can avoid it (files can easily be a few megabytes since they can be 3D models).
Assuming you know the url of the file when it lands in the S3 bucket, you can retrieve the file using a http.get, which will give you the contents of the (I assume plain text file). You can then parse that file and do whatever modification you need to do on the contents. If the file has changed, you can then write it back to the S3 bucket to replace the original file.
On AWS you can use Lambda to execute NodeJS code when an event is triggered (for example an upload to a specified bucket).
I am trying to upload blob to Parse. I can get a file to upload just fine, but I am trying to upload a blob that I get from canvas after doing a crop in Javascript. The line that I use to define a new parse File to be uploaded looks like this
var parseFile = new Parse.File("some_file_name.png", file);
Since the Blob Object is basically a File object without the meta attributes, I was hoping to be able to do something like this..
var parseFile = new Parse.File("some_file_name.png", blob);
But the result of this is parseFile being 'undefined'. And I thus cannot call subsequent methods to continue with the upload.
I can't seem to find any info anywhere else, and was hoping someone with a little more insight may know if I am missing something or on the wrong path. Any help is greatly appreciated!
It turns out that I can achieve the desired result by creating a Parse File object with the Base64 Data Url directly, instead of trying to create a Blob first.
var url = canvas.toDataURL("image/png");
var base64 = url.split('base64,')[1];
var parseFile = new Parse.File(name, { base64: base64 });
I found the answer here..
converting dataURI to File to use in Parse - javascript
Hope it helps someone!
I am using Winjs(javascript for windows 8 app).
what I want is to create a simple blob object from a specific url of my static image by giving the path.
What is the solution?
Any help will be appreciated.
'MSApp.CreateFileFromStorageFile()` as used below will work. if you need to send the file using WinJS.xhr() you can set as data in xhrOptions.
var uri = new Windows.Foundation.Uri('ms-appx:///images/IMG_0550.jpg');
var self = this;
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).then(function ongetfilecomplete(storageFile)
{
var file = MSApp.createFileFromStorageFile(storageFile);
var url = URL.createObjectURL(file, { oneTimeOnly: true });
// assume that this.imageElement points to the image tag
self.imageElement.setAttribute('src', url);
}).then(null, function onerror(error)
{
});
refer the link in case you are looking for upload the blob to azure. For send the blob to your webservice also, code will be on these lines.
URL.createObjectURL("") should work. I use it all the time. Test it with some other URLs. You could do it in debug mode in the JS console to make it easier.