Develop Reference

How to store imported files through input in a list temporary and then pass the list to post request using Javascript or jQuery?

I want to use this list because before submitting I might remove a few and add more files to the list. When I use the input to get the files it has only the last imported files, not the previous ones but I want to preserve the previous ones as well cause I want to add or subtract images or pdf files to list before submission.
HTML Code:
//<form method="POST" id="medical_record_form" enctype="multipart/form-data" '>
<div class="card">
<div class="card-body">
<div class="row form-row">
<div class="col-12 col-md-12">
<div class="form-group">
<label>Title</label>
<input type="text" name="title" id="title" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Medical Documents</label>
<div class="upload-img">
<div class="change-photo-btn">
<span><i class="fa fa-upload"></i> Upload File</span>
<input id="medical_documents" name="medical_documents"
type="file" multiple accept="image/*,.pdf"
onchange="readURL(this);" class="upload">
</div>
<small class="form-text text-muted">All Image Types Are Allowed, Plus
PDF Files</small>
</div>
</div>
<div class="upload-wrap" id="documets_wrapper">
<!-- the images preview goes here which is handled by javascript -->
</div>
</div>
</div>
</div>
</div>
<div class="submit-section">
<button type="submit" id="medical_submit_button" class="btn btn-primary submit-btn">Save
Changes</button>
</div>
</form>
Javascript code:
'''
// Fields
const medicalForm = document.getElementById('medical_record_form');
const title = document.getElementById('title');
const medicalDocuments = document.getElementById('medical_documents');
var filesList = [];
function readURL(input) {
if (input.files && input.files[0]) {
for (let i = 0; i < input.files.length; i++) {
filesList.push(event.target.files[i]); // not working
var tempHtml = '<div class="upload-images" id="image_' + i + '">' +
'<img src="' + URL.createObjectURL(event.target.files[i]) + '" alt="Upload Image">' +
'<i class="far fa-trash-alt"></i>' +
'</div>';
$('#documets_wrapper').append(tempHtml);
}
}
}
$("#medical_submit_button").on('click', function () {
medicalForm.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('csrfmiddlewaretoken', theToken);
formData.append('title', title.value);
formData.append('medical_documents', filesList);
$.ajax({
type: 'POST',
url: addUrl,
contentType: false,
// contentType: 'multipart/form-data', // tried this one also
processData: false,
data: formData,
success: function (response) {
console.log('value of response');
console.log(response);
},
error: function (error) {
console.log('error: ', error);
},
cache: false,
contentType: false,
processData: false,
});
})
})
'''

in Laravel I GOT AN ERROR The POST method is not supported for this route. Supported methods: GET, HEAD

I am trying to when the customer wants to upload an image or logo I want this image to display it in front of him by span element for him to make sure he uploaded the correct image to the system but when I press on upload I got POST method is not supported for this route. Supported methods: GET, HEAD. error
here is my code in card_view_blade
<div class="form-group row">
<div class="col-md-8">
<form method="post" id="upload-image-form" enctype="multipart/form-data">
#csrf
<div class="input-group" data-type="image">
<input type="file" name="file" class="form-control" id="image-input">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</form>
</div>
<div class="col-md-4">
<div class="alert" id="message" style="display: none"></div>
<span id="uploaded_image"></span>
</div>
</div>
here is the js code
#section('script')
<script type="text/javascript">
$(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#upload-image-form').submit(function(e) {
e.preventDefault();
let formData = new FormData(this);
$('#message').hide().html('');
$.ajax({
type:'POST',
url: `/upload-images`,
data: formData,
dataType:'JSON',
contentType: false,
cache: false,
processData: false,
success: (data) => {
console.log("success-",data);
if (data) {
this.reset();
$('#message').show().html(data.message);
$('#message').addClass(data.class_name);
$('#uploaded_image').html(data.uploaded_image);
}
setTimeout(function(){
$('#message').hide().html('');
}, 3000);
},
error: function(data){
console.log("error-",data);
// $('#image-input-error').text(data.responseJSON.errors.file);
$('#message').show().html('Something went wrong');
$('#message').addClass('danger');
$('#uploaded_image').html('');
setTimeout(function(){
$('#message').hide().html('');
}, 3000);
}
});
});
})
</script>
#endsection
route code
Route::post('/upload-images', 'CheckoutController#storeImage' )->name('images.store');

Nothing seems to be wrong with the code perhaps the routes are cached. Try clearing them first and see if the problem is resolved or not with the following commands:
php artisan route:clear

How to check if submitting form with jQuery if successful?

I have following codes as form, and I wanted to check if the form is been successfully submitted.
I was wondering how I can check on the console. I want to check if the form is been successfully submitted so I can display another form.
<form id="signup" data-magellan-target="signup" action="http://app-service-staging.com" class="epic_app-signup" method="POST">
<div class="grid__column " style="width: 100%;">
<input type="text" name="first_name" placeholder="Name" required/>
</div>
<div class="grid__column " style="width: 100%;">
<input type="text" name="password" placeholder="Password" required/>
</div>
<div class="grid__column " style="width: 100%;">
<input type="text" name="confimred-password" placeholder="Confirmed password" />
</div>
<div class="grid__column " style="width: 100%;">
<input type="date" name="startdate" id="startdate" min="2019-12-16">
</div>
</div>
<button type="submit" class="grid__column" style="width: 50%;"></button>
</div>
</div>
</div>
</form>
and the script,
$('.epic_app-signup').on('submit', function(e) {
e.preventDefault();
var formData = $('.epic_app-signup').serializeArray();
var jsonData = {};
formData.forEach(function(item, index) {
jsonData[item.name] = item.value;
});
console.log('data\n', jsonData);
$.ajax({
url: 'http://app-service-staging.com/api/auth/register',
type:'POST',
data: jsonData,
contentType: 'application/json'
}).done(function(data, textStatus, jqXHR) {
if (textStatus === 'success') {
}
});
});
});

you can do this by various ways currently you are not using ajax request if you want to achieve this without ajax let follow these steps
when user click on submit button your form is submitted received form information(you define the path in action attribute where form submitted) after processing successfully redirect toward a new form
second solution use jquery ajax request
//first form
<form action='test.php' id='form_1' method='post'>
<label>Full Name</label>
<input type='text' name='full_name'>
<input type='submit'>
</form>
//second form
<form action='test.php' id='form_2' method='post' style='display:none'>
<label>Father Name</label>
<input type='text' name='father_name'>
<input type='submit'>
</form>
use jquery cdn
<script src='https://code.jquery.com/jquery-git.js'></script>
<script>
$("#form_1").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert("form submitted successfully");
$('#form_1').hide();
$('#form_2').show();
},
error:function(data){
alert("there is an error kindly check it now");
}
});
return false;
});
</script>

upload image using vue js with form text fields

I started working on small project using Vue Js and I would like to add an upload file option in my contact form, I use serialize for the form because I have a lot of input text fields. but it doesn't work with append function. How can I add upload file to my serialized form
This is my code :
addProducts () {
const formData = $('#add-product').serialize()
// formData.append('image', this.selectedFile, this.selectedFile.name)
this.$axios.$post('http://endpoint.quicknsales.com/api/Product', formData).then((response) => {
this.validation(response)
if (response.success) { this.refresh = true }
})
}
A part of my HTML code :
<div class="form-group mb-2">
<div class="row">
<div class="col-md-6">
<label class="mb-0"><strong>Buying Price:</strong></label>
<input
id="product_buying_price"
v-model="formFields.product_buying_price"
type="text"
class="form-control rounded-0"
placeholder="Product Buying Price"
name="general[product_buying_price]"
>
</div>
<div class="col-md-6">
<label class="mb-0"><strong>Selling Price:</strong></label>
<input
id="product_selling_price"
v-model="formFields.product_selling_price"
type="text"
class="form-control rounded-0"
placeholder="Product Selling Price"
name="general[product_selling_price]"
>
<input id="file" type="file" name="general[file]">
</div>
</div>
</div>
How can I add the upload file to my form, as you can see I have already used append function but it doesn't work

after two days this is my solution :
const formData = new FormData()
formData.append('image', this.selectedFile, this.selectedFile.name)
$($('form-in-question').serializeArray()).each(function (i, field) {
formData.append(field.name, field.value)
})
this.$axios.$post('endpoint.com', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((response) => {
this.validation(response)
if (response.success) { this.refresh = true }
})

upload audio mp3 file using ajax in codeigniter

good day. I have a code which can upload image file but I don't know if this code is also work for uploading media file such as mp3. My project need to upload a media file but my code didn't work.
view
form
<form name="uploadform" id="uploadform" method="POST" enctype="multipart/form-data" >
<div class="form-group">
<label for="Title">Song Title</label>
<input type="text" class="form-control" id="title" placeholder="Title">
</div>
<div class="form-group">
<label for="Artist">Artist/Singer</label>
<input type="text" class="form-control" id="artist" placeholder="Artist/Singer">
</div>
<div class="form-group">
<label for="lyrics">Lyrics</label>
<textarea class="form-control" id="lyrics" placeholder="Lyrics"></textarea>
</div>
<div class="form-group">
<label for="Artist">Audio</label>
<input type="file" class="form-control" name="file" id="file" accept="audio/mp3">
</div>
<div class="form-group">
<span class="input-group-btn">
<button class="btn btn-primary" id="btn">UPLOAD</button>
</span>
</div>
</form>
view
javascript
$('#btn').click(function() {
var title = document.getElementById('title').value;
var artist = document.getElementById('artist').value;
var lyrics = document.getElementById('lyrics').value;
var file = $('#file').val();
$.ajax({
type: "post",
url: "<?php echo base_url('Admin/upload/')?>",
cache: false,
mimeType: "multipart/form-data",
contentType: false,
processData: false,
data: {
"title" : title,
"artist" : artist,
"lyrics" : lyrics,
"file" : file,
},
success: function(data){
try{
console.log(data);
}catch(e) {
alert('Exception while request..');
}
},
error: function(){
alert('Error while request..');
}
});
});
controller
Admin.php
public function upload()
{
$title = $this->input->post('title');
$artist = $this->input->post('artist');
$lyrics = $this->input->post('lyrics');
$attachment_file=$_FILES["file"];
$output_dir = "uploads/";
$fileName = $_FILES["attachment_file"]["name"];
move_uploaded_file($_FILES["attachment_file"]["tmp_name"],$output_dir.$fileName);
echo "File uploaded successfully";
}
that code gave me an error message.
<h4>A PHP Error was encountered</h4>
<p>Severity: Notice</p>
<p>Message: Undefined index: file</p>
<p>Filename: controllers/Admin.php</p>
<p>Line Number: 35</p>
I do not know why the file is undefined index since the 'file' is exist on form tag.
my code is not working for uploading mp3. How can I make this problem works?