I am trying to upload multiple images in Laravel but, one, am unable to upload more than one in the upload dialog box that comes with HTML and two, in my dump and die test before the foreach, I am getting a NULL value. I am new to Laravel and vue so I am sure it is a matter of something simple but for the life of my I don't know what I am missing. First off, I am running the post request in the web.php file which I am not sure if that is a good idea or not. Anyhow, my scripts fail before I can even upload a file. Here is the code I have so far.
web.php
Route::post('/upload', function (Request $request) {
$uploadedFiles = $request->pics;
foreach ($uploadedFiles as $file) {
dd($file);
$file->store('dummy');
}
return response(['status' => 'success'], 200);
});
app.js (void of code I felt was irrelevant)
require("./bootstrap");
window.Vue = require("vue");
import { Form, HasError, AlertError } from "vform";
window.Form = Form;
Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);
import VueRouter from "vue-router";
Vue.use(VueRouter);
let routes = [
{
path: "/dashboard",
component: require("./components/Dashboard.vue").default
},
{
path: "/users",
component: require("./components/Users.vue").default
},
{
path: "/tasks",
component: require("./components/Tasks.vue").default
}
];
const router = new VueRouter({
mode: "history",
routes
});
Vue.component(
"dashboard-component",
require("./components/Dashboard.vue").default
);
Vue.component("file-upload", require("./components/FileUpload.vue").default);
const app = new Vue({
el: "#app",
router
});
FileUpload.vue
<template>
<div>
<input class="" type="file" @change="fieldChange" />
<button class="btn btn-success float-right mt-3" @click="uploadFile">
Upload
</button>
</div>
</template>
<script>
export default {
data() {
return {
attachments: [],
formImage: new FormData()
};
},
methods: {
fieldChange(e) {
e.preventDefault();
let selectedFiles = e.target.files;
if (!selectedFiles.length) {
return false;
}
for (let i = 0; i < selectedFiles.length; i++) {
this.attachments.push(selectedFiles[i]);
}
console.log(this.attachments);
},
uploadFile() {
this.formImage.append("task_image", this.attachments);
const config = {
headers: { "Content-Type": "multipart/form-data" }
};
axios
.post("/upload", this.formImage, config)
.then(response => {
// success
})
.catch(response => {
// fail
});
}
},
mounted() {
console.log("Component mounted.");
}
};
</script>
Task.vue (In its entirety. I didn't know if something in here was causing the conflict so I included everything).
<template>
<div class="custom-container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div
class="card-header text-white"
style="background-color: #605ca8;"
>
<h3 class="card-title">Tasks</h3>
<div class="card-tools">
<button class="btn btn-success" @click="newModal">
<i class="fas fa-tasks"></i> Add New Task
</button>
<!-- <div class="input-group input-group-sm" style="width: 150px;">
<div class="input-group-append"></div>
</div>-->
</div>
</div>
<!-- /.card-header -->
<div
class="table-x-y card-body table-responsive p-0"
style="max-height: 600px;"
>
<table class="table table-hover text-wrap">
<thead>
<tr>
<th>Task</th>
<th>Priority</th>
<th>Assigned To</th>
<th>Assigned By</th>
<th>Date Assigned</th>
<th>Due By:</th>
<th>Task Desc.</th>
<th>Images</th>
<!-- <th>Notes</th> -->
<th>finished</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="task in tasks" :key="task.id">
<td>{{ task.task_name }}</td>
<td>{{ task.task_priority }}</td>
<td>{{ task.task_assigned_to }}</td>
<td>{{ task.task_assigned_by }}</td>
<td>{{ task.created_at }}</td>
<td>
{{ task.task_to_be_completed_date }}
</td>
<td
style="min-width: 300px; max-width: 301px;"
>
{{ task.task_description }}
</td>
<td>
<img
style="max-width: 150px;"
src="/img/molding.jpg"
alt
/>
{{ task.task_image }}
</td>
<!-- <td>{{ task.task_notes }}</td> -->
<td>{{ task.task_finished }}</td>
<td>{{ task.task_status }}</td>
<td>
<a
href="#"
class="badge badge-primary p-2 mb-3"
@click="editModal(task)"
>
<i class="fa fa-edit"></i> Edit
</a>
<a
@click="deleteTask(task.id)"
href="#"
class="badge badge-danger p-2"
>
<i class="fa fa-trash"></i> Delete
</a>
<file-upload></file-upload>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
<form @submit.prevent="editmode ? updateTask() : createTask()">
<!-- Modal -->
<div
class="modal fade"
id="addNew"
tabindex="-1"
aria-labelledby="addNewLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5
class="modal-title"
v-show="!editmode"
id="addNewLabel"
>
Add New Task
</h5>
<h5
class="modal-title"
v-show="editmode"
id="addNewLabel"
>
Update Task Information
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input
id="task_name"
type="text"
v-model="form.task_name"
name="task_name"
class="form-control"
placeholder="Task Name"
:class="{
'is-invalid': form.errors.has(
'task_name'
)
}"
/>
<has-error
:form="form"
field="task_name"
></has-error>
</div>
<div class="form-group">
<select
id="task_priority"
type="text"
v-model="form.task_priority"
name="task_priority"
class="form-control"
:class="{
'is-invalid': form.errors.has(
'task_priority'
)
}"
>
<option value
>Select a Priority Level</option
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<has-error
:form="form"
field="task_priority"
></has-error>
</div>
<div class="form-group">
<input
id="task_description"
type="text"
v-model="form.task_description"
name="task_description"
class="form-control"
placeholder="Task Description"
:class="{
'is-invalid': form.errors.has(
'task_description'
)
}"
/>
<has-error
:form="form"
field="task_description"
></has-error>
</div>
<div class="form-group">
<input
id="task_assigned_by"
type="text"
v-model="form.task_assigned_by"
name="task_assigned_by"
class="form-control"
placeholder="Assigned By"
:class="{
'is-invalid': form.errors.has(
'task_assigned_by'
)
}"
/>
<has-error
:form="form"
field="task_assigned_by"
></has-error>
</div>
<div class="form-group">
<input
id="task_assigned_to"
type="text"
v-model="form.task_assigned_to"
name="task_assigned_to"
class="form-control"
placeholder="Assigned To"
:class="{
'is-invalid': form.errors.has(
'task_assigned_to'
)
}"
value="form.user.id"
/>
<has-error
:form="form"
field="task_assigned_to"
></has-error>
</div>
<div class="form-group">
<label for="task_to_be_completed_date"
>Due:</label
>
<input
id="task_to_be_completed_date"
type="date"
v-model="form.task_to_be_completed_date"
name="task_to_be_completed_date"
class="form-control"
placeholder="Due: "
:class="{
'is-invalid': form.errors.has(
'task_to_be_completed_date'
)
}"
/>
<has-error
:form="form"
field="task_to_be_completed_date"
></has-error>
</div>
<div class="form-group">
<select
id="task_status"
type="text"
v-model="form.task_status"
name="task_status"
class="form-control"
:class="{
'is-invalid': form.errors.has(
'task_status'
)
}"
>
<option value>Select Task Status</option>
<option value="Pending">Pending</option>
<option value="Finished">Finished</option>
<option value="Incomplete"
>Incomplete</option
>
</select>
<has-error
:form="form"
field="task_status"
></has-error>
</div>
<!-- <div class="form-group">
<input
id="task_notes"
type="text"
v-model="form.task_notes"
name="task_notes"
class="form-control"
placeholder="Notes"
:class="{
'is-invalid': form.errors.has(
'task_notes')
}"
/>
<has-error :form="form" field="task_notes"></has-error>
</div>-->
<div class="form-group">
<select
id="task_finished"
type="text"
v-model="form.task_finished"
name="task_finished"
class="form-control"
:class="{
'is-invalid': form.errors.has(
'task_finished'
)
}"
>
<option value
>Select finished status</option
>
<option value="1">Finished</option>
<option value="0">Unfinished</option>
</select>
<has-error
:form="form"
field="task_status"
></has-error>
</div>
<!-- <div class="form-group">
<input id="upload-file" class="form-control" type="file" @change="fieldChange" />
<button class="btn btn-success float-right mt-3" @click="uploadFile">Upload</button>
</div>-->
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-primary"
data-dismiss="modal"
>
Close
</button>
<button
v-show="editmode"
type="submit"
class="btn btn-success"
>
Update
</button>
<button
v-show="!editmode"
type="submit"
class="btn btn-primary"
>
Create New Task
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
editmode: true,
tasks: {},
attachments: [],
formImage: new FormData(),
form: new Form({
id: "",
task_name: "",
task_description: "",
task_assigned_by: "",
task_assigned_to: "",
task_to_be_completed_date: "",
task_priority: "",
// task_notes: "",
task_status: "",
task_finished: ""
// task_image: "",
})
};
},
methods: {
updateTask() {
this.$Progress.start();
this.form
.put("api/task/" + this.form.id)
.then(() => {
// successfull
$("#addNew").modal("hide");
Swal.fire(
"Updated",
"Task information updated.",
"success"
);
this.$Progress.finish();
Fire_event.$emit("AfterCreate");
})
.catch(() => {
// Unsuccessfull
this.$Progress.fail();
});
},
editModal(task) {
this.editmode = true;
this.form.reset();
$("#addNew").modal("show");
this.form.fill(task);
},
newModal() {
this.editmode = false;
this.form.reset();
$("#addNew").modal("show");
},
deleteTask(id) {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!"
}).then(result => {
// Send request to the server
if (result.value) {
this.form
.delete("api/task/" + id)
.then(() => {
Swal.fire(
"Deleted!",
"Task has been deleted.",
"success"
);
Fire_event.$emit("AfterCreate");
})
.catch(() => {
Swal.fire(
"Failed",
"Something went wrong.",
"warning"
);
});
}
});
},
loadTasks() {
axios.get("api/task").then(({ data }) => (this.tasks = data.data));
},
createTask() {
this.$Progress.start();
this.form
.post("api/task")
.then(() => {
Fire_event.$emit("AfterCreate");
$("#addNew").modal("hide");
toast.fire({
icon: "success",
title: "Task Created successfully"
});
this.$Progress.finish();
this.target.reset();
})
.catch(() => {
this.$Progress.fail();
// toast.fire({
// icon: "error",
// title: "The Task was not created.",
// });
});
}
},
created() {
this.loadTasks();
// setInterval(() => this.loadUsers(), 3000);
Fire_event.$on("AfterCreate", () => {
this.loadTasks();
});
},
mounted() {
console.log("Component mounted.");
}
};
</script>
Any help on this would be greatly appreciated. I am trying to upload to my sql server locally. In my .env file, I have FILESYSTEM_DRIVER=public specified pointing to the config/filesystem.php public route pre-specified in that file.
There's a couple of problems here
You are preventing the default event action for the change event on
<input type="file">. Don't do that. Remove this line from yourfieldChangemethodContent-typeheaders formultipart/form-datarequests also need to include mime-boundary tokens. These are added automatically by the browser when usingFormDataso you should not be setting them manually. Change your Axios call toYou are adding an array of files to your
FormData. This isn't how you add multiple files. Instead, you must callappend()multiple times. When posting arrays of data to PHP, the field name should also be suffixed with[]See https://www.php.net/manual/features.file-upload.multiple.php
Your PHP code should be looking for
task_imagein the request files, notpics