Firstly, I allow users to upload multiple files. Then I use loop with fileReader to read all the uploaded files. Next I edit some data of each file and create new files contain each data. Finally, I want to download all of these files using fileSaver library. The problem is that I can only download the last file with the below code. I would be very grateful if someone can fix it.
Code:
<html>
<body>
<!-- Link to FileSaver Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Allow users to upload multiple files -->
<input type="file" id="real-file" accept=".xml" multiple/>
<script>
const realFileBtn = document.getElementById("real-file")
realFileBtn.addEventListener("change", function() {
if (realFileBtn.value) {
// Use loop to do for all uploaded files
for(var i = 0; i < realFileBtn.files.length; i++){
var fr = new FileReader()
var fileName = realFileBtn.files[i].name
fr.readAsText(realFileBtn.files[i])
fr.onload = function() {
// After loading the file, I get the data of it and edit some information (for example: replace "a" with "b")
var data = fr.result.replaceAll("a", "b")
// I create a new file that contain the edited data with the same name as the uploaded file
var myFile = new File(
[data],
fileName,
{type: "text/xml; charset = utf8"})
// Then I download that file
saveAs(myFile)
// The issue is that I can only download 1 file and that file is the last file you uploaded
// I want to read the first file, edit its data and download the file contain that data. Then do the same with second file,
// third file,... n file
}
}
}
})
</script>
</body>
Related
I've studied all of the SO Similar Questions about this problem, a few were helpful, but did not directly address the saving of an xlsx file to the local Win10 downloads folder.
The xlsx file sits on a CentOS 7 server. If I use Filezilla to copy it to Win10, it's fine.
Looking at the component code below, I am reading the xlsx from the server and getting its base64Str, which matches exactly what I used to store the file. I create a blob fine, but FileSaver, saves the Win10 file with its contents as the base64Str, instead of a an xlsx binary. Can FileSaver save binary content, or only text?
Thanks for helping!
Component Code
//INPUT DATA: docName: test.xlsx; mediaType: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; snippet base64Str: VUVzREJCUU...FBQUFBPQ=
//NOTE: input data is from a CentOS 7 filesystem
const byteStr = atob(base64Str);
const arrayBuffer = new ArrayBuffer(byteStr.length);
const int8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteStr.length; i++) {
int8Array[i] = byteStr.charCodeAt(i);
}
const blob = new Blob([arrayBuffer], { type: mediaType }); //also tried type: 'application/octet-stream'
//alternate technique that produces same corrupted result
//const base64Response = await fetch(`data:` +mediaType +`;base64,${base64Str}`);
//const blob = await base64Response.blob();
fileSaver.saveAs(blob, docName); //saves to Win10 downloads folder
Please try The below code. (Here in this example I have demonstrate the following 1) Input base64 string to a input text area 2) on click of download file link 3) will prompt to download the file into correct xlsx format without corrupted data).
Kindly modify the code as per your need . Example only demonstrate the file download feature.
Point to notice :
var mediaType="data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,";
function saveAsXlsxFile(){
var mediaType="data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,";
var userInp = document.getElementById('base64input');
// var userInp = "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";
var a = document.createElement('a');
a.href = mediaType+userInp.value;
//a.href = mediaType+userInp;
a.download = 'filename.xlsx';
a.textContent = 'Download file!';
document.body.appendChild(a);
}
<textarea placeholder="paste the base64 data here, exclude readable headers" id='base64input' type="textarea"></textarea>
<br>
<input onclick="saveAsXlsxFile()" type="button" value="update content of link"></button>
HTML code for demo only ( not mandatory for your requirement)
<textarea placeholder="paste the base64 data here, exclude readable headers" id='base64input'></textarea>
<br>
<input onclick="saveAsXlsxFile()" type="button" value="update content of link"></button>
Sample userInp value Try this :
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
Happy to help further if needed. :)
so I used this. Might also work for anyone trying to convert a static base 64 string to xlxs file. This solutions assumes that you know the file type.
let toConvert = 'UEsDBBQAAAgIABSJA..'//supply your full plain string here
let file = `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,${toConvert}`;
setTimeout(() => {
fileSaver.saveAs(file, 'fileName');
}, 1300);//timeout is only added to simulate time to load. you can take it out
Regards
Not sure if this works , but try setting the mediaType like below :
const mediaType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
I have input file (Multiple) use to upload images. When an image is uploaded it will display as a thumbnail and also as a full view. I already have URL.createObjectURL() that renders the image into blob but when the number of images is more then it is effecting the page a little since each image is having 2 blob-data for thumbnail and full view.
For single file upload it was easy to have URL.createObjectURL() for thumbnails and $(this).val() to generate fake path for full view. But I do not know how to do that with multi file upload.
Sample code:
$('#imageBtn').on('change', function(){
var inputFiles = this.files;
$(inputFiles).each(function(index) {
var reader = new FileReader();
reader.readAsDataURL(inputFile);
reader.onloadend = function(){
RenderedPath = URL.createObjectURL(inputFile);
FakePath = inputFile.val();
// Some codes to populate the thumbnail and fullview
}
});
});
So, how can I obtain the fake path for each uploaded image?
I don't see what you want to do with this fakePath. Being a "fake" path, it's of no use.
Historically, (before the File API), it was a way to retrieve the name of a selected File, but now that we've got the File API, this information is provided inside the File object directly.
So if you really want to build it yourself, like in the case of an input[type=file][multiple], then you can simply prepend "C:\fakePath\" to the File's name.
But once again, you won't be able to do anything from this string.
Also note that in your code you don't do anything with the FileReader's result, and anyway, you don't need it at this point, so remove it here, since it is probably one of the causes of your memory issues.
Indeed, BlobURIs in the case of user-provided Files won't use any memory, being simple pointers to the file stored on user-disk, while reading it as a dataURI will actually load the whole data three times in memory.
So for the part you shown, it can simply be
$('input[type="file"]').on('change', function() {
var files = this.files;
$(files).each(function(index, file) {
// Still don't know why you want this...
var fakepath = 'C:\\fakepath\\';
$('body').append('<div>' +
// build a fake path string for each File
'<p class="path">'+ fakepath + file.name + '</p>' +
// all that is really needed to display the image
'<img src="'+URL.createObjectURL(file)+'">' +
'</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple>
Now, you stated in a comment that you need the FileReader to pass it to jsZip library, if you are talking about this one, then you've to know that it accepts Blobs. So you still don't need a FileReader.
var fileList = [];
$('input[type="file"]').on('change', function() {
var files = this.files;
$(files).each(function(index, file) {
$('body').append($('<img>', {
src: URL.createObjectURL(file),
onload: function() { fileList.push(file); $('button').attr('disabled', false);},
onerror: function() { $(this).remove(); }
}));
});
});
$('button').on('click', function() {
var zip = new JSZip();
fileList.forEach(function(file) {
zip.file(file.name, file);
});
zip.generateAsync({
type: "blob"
})
.then(function(blob) {
saveAs(blob, "myfiles.zip");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<input type="file" multiple accept="image/*">
<button disabled>save as zip</button>
I would like to allow a user to upload multiple files through Ajax. If some of the files are too large I would like to remove them from the upload list. How can I go about doing this? I currently have the following for my input field.
<input id="file" type="file" onChange={this.handleChange.bind(this)} required multiple />
So far I have come up with something like this to verify which files are too large:
handleChange(event) {
const target = event.target;
if (target.type === 'file'){
console.log("FILES")
const files = target.files
console.log("The following files are too large")
for (let i=0; i < files.length; i++){
if (files[i].size > 50000){
console.log(files[i].name)
}
}
}
}
The thing I am confused about is how files are handled, as they are not really links to the actual files on the file system. How does the file structure work? How can I store the good files into a new file structure that is uploadable with Ajax?
target.files is just an array. You can simple filter it, removing the files you don't want and do whatever you want with the new array (e.g. store it in the component's state).
const files = target.files.filter(file => file.size <= 50000);
this.setState({files});
// or uploadFiles(files)
If you are asking how to actually send files via an XMLHTTPRequest, this can be done with FormData:
const data = new FormData();
files.forEach(file => data.append(file.name, file));
and then send the FormData object via the XMLHTTPRequest.
For example, if I have an image and I download it -- how does the computer know that all the bytes are supposed to be in that sequential order?
When I upload an image, is it possible to upload it in "chunks" so I can access/use whatever I have uploaded thus far (i.e. I have only uploaded the top half of the image) -- how would I access it?
The same would go for video or PDF, etc.
You can read file into chunks and upload file in chunks.
See the example below.
<input type="file" name="filebrowsefileid">
var filePicker = document.getElementById('filebrowsefileid');
var file = filePicker.files[0];
var chunck = file.slice(a,b);
var reader = new FileReader();
reader.readAsBinaryString(chunck );
....
reader["onloadend"] = function () {
reader.result; // This is what you want
}
I am using EXT JS 4.2 which has a panel which contains a export to CSV button.
On clicking on it multiple (total six) files are downloaded. I want these files to be downloaded in a single ZIP file.
There is a perfect plugin to create zip files inside browser.
JSZip: https://stuk.github.io/jszip/
Install the plugin by adding js files manually:
download JSZip and include the file dist/jszip.js or
dist/jszip.min.js
JSFiddle - JSZip 3.0:
https://jsfiddle.net/andrebonna/u8zsbzau/
var zip = new JSZip();
for (var i = 0; i < 5; i++) {
var CSV = 'CSV_content';
// Fill CSV variable
zip.file("file" + i + ".csv", CSV);
}
zip.generateAsync({
type: "base64"
}).then(function(content) {
window.location.href = "data:application/zip;base64," + content;
});