I am trying to load a file into the browser and render it in a vue-excel-editor component. To do this I have a Vuetify v-file-input component into which the user can enter a .xlsx file. That works fine. I then listen to the change event on this component to see when the file is put in. I log the event and it looks like this (copied from the console):
File
lastModified: 1613740797643
name: "Book1.xlsx"
size: 8129
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
webkitRelativePath: ""
<prototype>: FilePrototype { name: Getter, lastModified: Getter, webkitRelativePath: Getter, … }
I don't understand how I can read the contents of this file, which I am trying to do with js-xlsx. It has an example on its npm page using an HTML5 file input:
function handleFile(e) {
var files = e.target.files;
var i, f;
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsBinaryString(f);
}
}
input_dom_element.addEventListener('change', handleFile, false);
I am trying to adapt this into Vue but it complains that e doesn't have a target property, which is obviously true becuase of what I printed in the console earlier. Is this not the right way to do this? Here are the relevant bits from my Vue component:
<script>
<template>
<v-file-input
label="Upload XLSX"
filled
#change="handleExcelBrowserUpload"
></v-file-input>
</template>
<script>
import XLSX from "js-xlsx";
export default {
name: 'LoadCurveUpload',
methods: {
handleExcelBrowserUpload(e) {
console.log(e); // This prints the first code block in this question
var files = e.target.files;
var i, f;
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
console.log(workbook);
}
}
}
}
I use the following code in Vuetify to read xlsx and turn it into an array.
Code
Template
<v-row>
<v-col cols="8">
<template>
<v-file-input
accept=".xlsx"
label="File input(xlsx)"
outlined
v-model="selectXlsx"
show-size
>
</v-file-input>
</template>
</v-col>
<v-col cols="4">
<v-btn
color="primary"
#click="uploadXlsx"
class="mt-3"
>
Upload
</v-btn>
</v-col>
</v-row>
Script
import XLSX from "xlsx";
export default {
name: "App",
data() {
return {
selectXlsx: null,
}
methods: {
uploadXlsx() {
if (!this.selectXlsx) {
console.log("Please upload a xlsx file")
return;
}
if (this.selectXlsx) {
const reader = new FileReader();
reader.onload = (e) => {
/* Parse data */
const bstr = e.target.result;
const wb = XLSX.read(bstr, { type: "binary" });
/* Get first worksheet */
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
/* Convert array of arrays */
const data = XLSX.utils.sheet_to_json(ws, { header: 1 });
console.log(data);
};
reader.readAsBinaryString(this.selectXlsx);
}
this.selectXlsx = null;
},
}
}
so I've been trying to upload multiple image file using Vue JS with Laravel at server side.
My template vue
<input type="file" id = "file" ref="file" v-on:change="onImageChange" multiple />
My Javascript code
<script>
export default {
data(){
return{
product: {},
image: '',
}
},
created() {
let uri = `/api/product/edit/${this.$route.params.id}`;
this.axios.get(uri).then((response) => {
this.product = response.data;
});
},
methods:{
onImageChange(e){
let files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file){
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
replaceByDefault(e) {
e.target.src = this.src='/uploads/products/default_image.jpg';
},
saveImage(e){
e.preventDefault()
var file = document.getElementById('file').files;
let formData = new FormData;
formData.append('productId', this.product.id)
formData.append('file', file[0])
axios.post('/api/product/image/add', formData, {
headers: {'Content-Type': 'multipart/form-data'}
}).then((response) => {
this.$router.push({name: 'view',params: { id: this.product.id }});
});
}
}
}
</script>
I saw somewhere the internet that in vue you can use looping the formData.append but how do i catch the data in the server side. Here is my ProductController
$saveImage = new Gallery;
$saveImage->product_id = $request->productId;
$file = request()->file('file');
$file_name = time().$file->getClientOriginalName();
$path = $imgUpload = Image::make($file)->save(public_path('/uploads/products/' . $file_name));
$saveImage->path = '/uploads/products/'.$file_name;
$saveImage->status = 1;
$saveImage->save();
return "success";
Thank you very much guys!
you can use request()->file('file') to get files. but you have to add some changes in your vue source when you are trying to send an array of files.
Vue
let formData = new FormData;
formData.append('productId', this.product.id)
// append files
for(let i=0; i<file.length; i++){
formData.append('file[]', file[i])
}
useing file[] instead of file will generate an array of files in request payload.
then in laravel side of code you can use request()->file('file') to get that array of files. but if you want just one of them (for example: first one) you can use request()->file('file.0') to get that file.
SimpleDialog.jsx
const [imagePreview, setImagePreview] = React.useState(null);
const handleChangeImage = event => {
let reader = new FileReader();
let file = event.target.files[0];
reader.onload = event => {
console.log(event);
setImagePreview(event.target.result);
};
reader.readAsDataURL(file);
};
return (
<div>
<input
accept="image/*"
id="contained-button-file"
multiple
type="file"
style={{ display: 'none' }}
onChange={handleChangeImage}
/>
<img id="preview" src={imagePreview} />
</div>
);
SimpleDialog.test.js
it('should change image src', () => {
const event = {
target: {
files: [
{
name: 'image.png',
size: 50000,
type: 'image/png'
}
]
}
};
let spy = jest
.spyOn(FileReader.prototype, 'onload')
.mockImplementation(() => null);
wrapper.find('input[type="file"]').simulate('change', event);
expect(spy).toHaveBeenCalled();
expect(wrapper.find('#preview').prop('src')).not.toBeNull();
});
When running the test it gives me the error TypeError: Illegal invocation.
Anyone who can help me with this unit test? I Just want to simulate on change if the src of an image has value or not.
The cause of the error is that onload is defined as property descriptor and assigning it to FileReader.prototype which is done by spyOn isn't supported.
There's no reason to mock onload because it's assigned in tested code and needs to be tested.
The straightforward way is to not patch JSDOM FileReader implementation but stub it entirely:
jest.spyOn(global, 'FileReader').mockImplementation(function () {
this.readAsDataURL = jest.fn();
});
wrapper.find('input[type="file"]').simulate('change', event);
let reader = FileReader.mock.instances[0];
expect(reader.readAsDataURL).toHaveBeenCalledWith(...);
expect(reader.onload).toBe(expect.any(Function));
expect(wrapper.find('#preview').prop('src')).toBeNull();
reader.onload({ target: { result: 'foo' } });
expect(wrapper.find('#preview').prop('src')).toBe('foo');
Had the same issue with checking some side effect that should be invoked on FileReader.onload, so I just ended up setting a short pause after triggering the event (I'm using enzyme + jest). Setting the timeout is probably not the best solution here, but it was the only thing that worked.
const pauseFor = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds));
...
wrapper.find('.upload-box').simulate('drop', someMockedDropEvent);
// set pause was the only way to make reader.onload to fire
await pauseFor(100);
expect(something).toEqual(something)
What I'm trying to do is to display and modify the images that the car has "in my case", so I used the vue-upload-multiple-image package to save the images and went well, but when I call back these images to the same package I got stuck.
I convert the images that has been stored to base64 now what I want is the list of images go to specific function inside that package, so it will display the images when I try to update the car.
This is the function I want to call:
createImage(file) {
let reader = new FileReader()
let formData = new FormData()
formData.append('file', file)
reader.onload = e => {
let dataURI = e.target.result
if (dataURI) {
if (!this.images.length) {
this.images.push({
name: file.name,
path: dataURI,
highlight: 1,
default: 1,
})
this.currentIndexImage = 0
} else {
this.images.push({
name: file.name,
path: dataURI,
highlight: 0,
default: 0,
})
}
this.$emit(
'upload-success',
formData,
this.images.length - 1,
this.images,
)
}
}
reader.readAsDataURL(file)
},
The Function inside this file
I tried to console.log the function normally it outputs undefined,
I think of props but how it gonna help me.
mounted(){
console.log(this.createImage);
What I want is just to call this function inside my editcar component and sent to it the converter images.
Thank you for helping me and read the this far.
I Found the solution of the problem: in the doc there is dataImages prop. I use it like this:
<div class="form-group m-form__group">
<vue-upload-multiple-image
#upload-success="uploadImageSuccess"
#before-remove="beforeRemove"
#edit-image="editImage"
:dataImages="images"
></vue-upload-multiple-image>
</div>
And it must the images base64 so here is the function the the data.
data() {
return {
images :[],
}
},
mounted() {
this.ConvertImages();
},
This is methods:
methods: {
ConvertImages() {
let images = this.car.images
let image = this.images
for (var i = 0; i < images.length; i++) {
this.toDataURL(images[i].path, function(dataURL) {
image.push({
path: dataURL,
})
})
}
},
toDataURL(url, callback) {
var xhr = new XMLHttpRequest()
xhr.onload = function() {
var reader = new FileReader()
reader.onloadend = function() {
callback(reader.result)
}
reader.readAsDataURL(xhr.response)
}
xhr.open('GET', url)
xhr.responseType = 'blob'
xhr.send()
},
}, //END OF METHODS
How can I write an e2e test of flow that requires interaction with the file Input DOM element?
If it's a text input I can interact with it (check value, set value) etc as its a DOM component. But If I have a File Input element, I am guessing that the interaction is limited till I can open the dialog to select a File. I can't move forward and select the file I want to upload as the dialog would be native and not some browser element.
So how would I test that a user can correctly upload a file from my site? I am using Cypress to write my e2e tests.
it('Testing picture uploading', () => {
cy.fixture('testPicture.png').then(fileContent => {
cy.get('input[type="file"]').attachFile({
fileContent: fileContent.toString(),
fileName: 'testPicture.png',
mimeType: 'image/png'
});
});
});
Use cypress file upload package: https://www.npmjs.com/package/cypress-file-upload
Note: testPicture.png must be in fixture folder of cypress
For me the easier way to do this is using this cypress file upload package
Install it:
npm install --save-dev cypress-file-upload
Then add this line to your project's cypress/support/commands.js:
import 'cypress-file-upload';
Now you can do:
const fixtureFile = 'photo.png';
cy.get('[data-cy="file-input"]').attachFile(fixtureFile);
photo.png must be in cypress/fixtures/
For more examples checkout the Usage section on README of the package.
Since 9.3.0 you can use selectFile.
cy.get('input[type=file]').selectFile('cypress/fixtures/file.json')
See:
https://github.com/cypress-io/cypress/issues/170
https://cypress.io/blog/2022/01/18/uploading-files-with-selectfile/
https://docs.cypress.io/guides/references/migration-guide#Migrating-from-cypress-file-upload-to-selectFile
With this approach/hack you can actually make it:
https://github.com/javieraviles/cypress-upload-file-post-form
It is based on different answers from the aformentioned thread https://github.com/cypress-io/cypress/issues/170
First scenario (upload_file_to_form_spec.js):
I want to test a UI where a file has to be selected/uploaded before
submitting the form.
Include the following code in your "commands.js" file within the cypress
support folder, so the command cy.upload_file() can be used from any test:
Cypress.Commands.add('upload_file', (fileName, fileType, selector) => {
cy.get(selector).then(subject => {
cy.fixture(fileName, 'hex').then((fileHex) => {
const fileBytes = hexStringToByte(fileHex);
const testFile = new File([fileBytes], fileName, {
type: fileType
});
const dataTransfer = new DataTransfer()
const el = subject[0]
dataTransfer.items.add(testFile)
el.files = dataTransfer.files
})
})
})
// UTILS
function hexStringToByte(str) {
if (!str) {
return new Uint8Array();
}
var a = [];
for (var i = 0, len = str.length; i < len; i += 2) {
a.push(parseInt(str.substr(i, 2), 16));
}
return new Uint8Array(a);
}
Then, in case you want to upload an excel file, fill in other inputs and submit the form, the test would be something like this:
describe('Testing the excel form', function () {
it ('Uploading the right file imports data from the excel successfully', function() {
const testUrl = 'http://localhost:3000/excel_form';
const fileName = 'your_file_name.xlsx';
const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const fileInput = 'input[type=file]';
cy.visit(testUrl);
cy.upload_file(fileName, fileType, fileInput);
cy.get('#other_form_input2').type('input_content2');
.
.
.
cy.get('button').contains('Submit').click();
cy.get('.result-dialog').should('contain', 'X elements from the excel where successfully imported');
})
})
Testing File Input elements is not yet supported in Cypress. The only way to test File Inputs is to:
Issue native events (which Cypress has on their Roadmap).
Understand how your application handles file uploads with File API and then stub it out. It's possible but not generic enough to give any specific advice on.
See this open issue for more detail.
In my case I had client & server side file validation to check if the file is JPEG or PDF. So I had to create a upload command which would read the file in binary from Fixtures and prepare a blob with the file extension.
Cypress.Commands.add('uploadFile', { prevSubject: true }, (subject, fileName, fileType = '') => {
cy.fixture(fileName,'binary').then(content => {
return Cypress.Blob.binaryStringToBlob(content, fileType).then(blob => {
const el = subject[0];
const testFile = new File([blob], fileName, {type: fileType});
const dataTransfer = new DataTransfer();
dataTransfer.items.add(testFile);
el.files = dataTransfer.files;
cy.wrap(subject).trigger('change', { force: true });
});
});
});
then use it as
cy.get('input[type=file]').uploadFile('smiling_pic.jpg', 'image/jpeg');
smiling_pic.jpg will be in fixtures folder
The following function works for me,
cy.getTestElement('testUploadFront').should('exist');
const fixturePath = 'test.png';
const mimeType = 'application/png';
const filename = 'test.png';
cy.getTestElement('testUploadFrontID')
.get('input[type=file')
.eq(0)
.then(subject => {
cy.fixture(fixturePath, 'base64').then(front => {
Cypress.Blob.base64StringToBlob(front, mimeType).then(function(blob) {
var testfile = new File([blob], filename, { type: mimeType });
var dataTransfer = new DataTransfer();
var fileInput = subject[0];
dataTransfer.items.add(testfile);
fileInput.files = dataTransfer.files;
cy.wrap(subject).trigger('change', { force: true });
});
});
});
// Cypress.Commands.add(`getTestElement`, selector =>
// cy.get(`[data-testid="${selector}"]`)
// );
Also based on previously mentioned github issue, so big thanks to the folks there.
The upvoted answer worked initially for me, but I ran into string decoding issues trying to handle JSON files. It also felt like extra work having to deal with hex.
The code below handles JSON files slightly differently to prevent encode/decode issues, and uses Cypress's built in Cypress.Blob.base64StringToBlob:
/**
* Converts Cypress fixtures, including JSON, to a Blob. All file types are
* converted to base64 then converted to a Blob using Cypress
* expect application/json. Json files are just stringified then converted to
* a blob (prevents issues with invalid string decoding).
* #param {String} fileUrl - The file url to upload
* #param {String} type - content type of the uploaded file
* #return {Promise} Resolves with blob containing fixture contents
*/
function getFixtureBlob(fileUrl, type) {
return type === 'application/json'
? cy
.fixture(fileUrl)
.then(JSON.stringify)
.then(jsonStr => new Blob([jsonStr], { type: 'application/json' }))
: cy.fixture(fileUrl, 'base64').then(Cypress.Blob.base64StringToBlob)
}
/**
* Uploads a file to an input
* #memberOf Cypress.Chainable#
* #name uploadFile
* #function
* #param {String} selector - element to target
* #param {String} fileUrl - The file url to upload
* #param {String} type - content type of the uploaded file
*/
Cypress.Commands.add('uploadFile', (selector, fileUrl, type = '') => {
return cy.get(selector).then(subject => {
return getFixtureBlob(fileUrl, type).then(blob => {
return cy.window().then(win => {
const el = subject[0]
const nameSegments = fileUrl.split('/')
const name = nameSegments[nameSegments.length - 1]
const testFile = new win.File([blob], name, { type })
const dataTransfer = new win.DataTransfer()
dataTransfer.items.add(testFile)
el.files = dataTransfer.files
return subject
})
})
})
})
You can do it with new Cypress command:
cy.get('input[type=file]').selectFile('file.json')
This is now available within Cypress library itself from version 9.3 and above. Follow the migration guide on how to move from cypress-file-upload plugin to Cypress .selectFile() command:
Migrating-from-cypress-file-upload-to-selectFile
in your commands.ts file within your test folder add:
//this is for typescript intellisense to recognize new command
declare namespace Cypress {
interface Chainable<Subject> {
attach_file(value: string, fileType: string): Chainable<Subject>;
}
}
//new command
Cypress.Commands.add(
'attach_file',
{
prevSubject: 'element',
},
(input, fileName, fileType) => {
cy.fixture(fileName)
.then((content) => Cypress.Blob.base64StringToBlob(content, fileType))
.then((blob) => {
const testFile = new File([blob], fileName);
const dataTransfer = new DataTransfer();
dataTransfer.items.add(testFile);
input[0].files = dataTransfer.files;
return input;
});
},
);
Usage:
cy.get('[data-cy=upload_button_input]')
.attach_file('./food.jpg', 'image/jpg')
.trigger('change', { force: true });
another option is to use cypress-file-upload, which is buggy in version 4.0.7 (uploads files twice)
cy.fixture("image.jpg").then((fileContent) => {
cy.get("#fsp-fileUpload").attachFile({
fileContent,
fileName: "image",
encoding: "base64",
mimeType: "image/jpg",
});
});
Here is the multiple file upload version:
Cypress.Commands.add('uploadMultiFiles',(args) => {
const { dataJson, dirName, inputTag, mineType} = args
const arr = []
dataJson.files.forEach((file, i) => {
cy.fixture(`${ dirName + file }`).as(`file${i}`)
})
cy.get(`${inputTag}`).then(function (el) {
for(const prop in this) {
if (prop.includes("file")) {
arr.push(this[prop])
}
}
const list = new DataTransfer()
dataJson.files.forEach((item, i) => {
// convert the logo base64 string to a blob
const blob = Cypress.Blob.base64StringToBlob(arr[i], mineType)
const file = new FileCopy([blob], `${item}`, { type: mineType }, `${ dirName + item }`)
const pathName = dirName.slice(1)
file.webkitRelativePath = `${ pathName + item}`
console.log(file)
list.items.add(file)
})
const myFileList = list.files
el[0].files = myFileList
el[0].dispatchEvent(new Event('change', { bubbles: true }))
})
})
The usage:
First, prepare a data.json file inside the fixtures folder, example:
data.json
{
"files":[
"1_TEST-JOHN-01.jpeg",
"2_TEST-JOHN-01.jpeg",
"3_TEST-JOHN-01.jpeg",
"4_TEST-JOHN-01.jpeg",
"5_TEST-JOHN-01.jpeg",
"6_TEST-JOHN-01.jpeg",
"7_TEST-JOHN-01.jpeg",
"8_TEST-JOHN-01.jpeg",
"9_TEST-JOHN-01.jpeg",
"10_TEST-JOHN-01.jpeg"
]
}
Second, import the json data into your spec.js
import data from '../fixtures/data.json'
Third, Write a class to extend the File web API object with the functions to set and get webkitRelativePath value
class FileCopy extends File {
constructor(bits, filename, options) {
super(bits, filename, options)
let webkitRelativePath
Object.defineProperties(this, {
webkitRelativePath : {
enumerable : true,
set : function(value){
webkitRelativePath = value;
},
get : function(){
return webkitRelativePath;
}
},
});
}
}
Finally, call the cmd in the spec.js
cy.uploadMultiFiles(
{
dataJson:data, // the data.json you imported.
dirName:"/your/dirname/",
inputTag:"input#upload",
mineType:"image/jpeg"
}
)
if your file input display: none; use
cy.get('[data-type=inputFile]').selectFile('cypress/fixtures/avatar.jpg', { force: true })
else
cy.get('[data-type=inputFile]').selectFile('cypress/fixtures/avatar.jpg')