Web Developer
i'm creating a form that requires image upload but it's throwing an error "TypeError: Cannot read properties of null (reading 'files')"....
This is my code....
function ImageUpload({ files, setFile }) {
const { useState } = React;
const [message, setMessage] = useState();
const handleFile = (e) => {
setMessage("");
let file = e.target.files;
for (let i = 0; i < file.length; i++) {
const fileType = file[i]["type"];
const validImageTypes = ["image/gif", "image/jpeg", "image/png"];
if (validImageTypes.includes(fileType)) {
setFile([...files, file[i]]);
} else {
setMessage("only images accepted");
}
}
};
const removeImage = (i) => {
setFile(files.filter((x) => x.name !== i));
};
const client = new Client()
.setEndpoint(String(process.env.NEXT_PUBLIC_APPWRITE_URL))
.setProject(String(process.env.NEXT_PUBLIC_ENDPOINT));
const storage = new Storage(client);
const promise = storage.createFile(
(String(process.env.NEXT_PUBLIC_BUCKET_ID),file),
ID.unique(),
document.getElementById("uploader").files[0]
);
promise.then(function (response) {
console.log(response); // Success
}, function (error) {
console.log(error); // Failure
});
return (