Hello everyone, i want to upload two separate files along a form, but i am finding hard to achieve.
SCREENSHOT
CODE
<form id="edit-profile-form" action="{{$root.settings.apiUrl}}/api/v1/users" method="POST" enctype="multipart/form-data">
<input id="usertype" type="hidden" name="user_type" value="user">
<div class="block">
<div class="row resizable">
<div class="col-100">
<div class="list">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="img-circle-box">
<img id="profile-pic" src="{{ customerPic }}" alt="Profile Picture" class="d-none">
<label for="file_input">
<i id="camera-upload" class="fa fa-camera fa-3x white-text text-shadow pointer img-circle-box-icon"></i>
</label>
<input id="file_input" type="file" name="profile_pic" />
</div>
<h5 class="text-center text-size-10 josefin-sans-bold-font light-grey-text-color go-down-a-bit-20">
Click the camera icon to upload image
</h5>
<style>
#file_input {
display: none;
}
</style>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Full name</div>
<div class="item-input-wrap">
<input id="fullname" type="text" name="name" required validate data-error-message="Only text please!" placeholder="Enter your full name">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Email Address</div>
<div class="item-input-wrap">
<input id="email" type="email" name="email" required validate data-error-message="Only email address please!" placeholder="Email address">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Phone</div>
<div class="item-input-wrap">
<input id="phone" type="text" name="phone" required validate data-error-message="Only 11 pin digits please!" placeholder="Phone e.g 07000000000">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Address</div>
<div class="item-input-wrap">
<input id="address" type="text" name="address" required placeholder="Address e.g Mile 12, Lagos">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">State</div>
<div class="item-input-wrap">
<input id="state" type="text" name="state" required placeholder="State e.g">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">LGA (Local Goverment Area)</div>
<div class="item-input-wrap">
<input id="lga" type="text" name="lga" required placeholder="LGA e.g Lekki">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Upload ID</div>
<div class="item-input-wrap">
<input id="id" type="file" name="id" required />
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Vehicle Specialization</div>
<div class="item-input-wrap">
<input id="vehicle_specialization" type="text" name="vehicle_specialization" required placeholder="Vehicle Specialization e.g Toyota">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Work Specialization</div>
<div class="item-input-wrap">
<input id="work_specialization" type="text" name="work_specialization" required placeholder="Work Specialization">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Years of Practice</div>
<div class="item-input-wrap">
<input id="years_of_practice" type="text" name="years_of_practice" required placeholder="Years of Practice e.g 2 years">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label"> Guarantor Name</div>
<div class="item-input-wrap">
<input id="guarantor_name" type="text" name="guarantor_name" required placeholder="Guarantor Name e.g Mr Adekunle">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label"> Workshop Address </div>
<div class="item-input-wrap">
<input id="workshop_address" type="text" name="workshop_address" required placeholder="Workshop Address e.g Plot 567b Festac Town, Lagos">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<input id="user-id" type="hidden" name="user-id" value="{{ customerId }}">
</ul>
</div>
</div>
</div>
</div>
<div class="block">
<div class="row resizable">
<div class="col-100">
<button id="complete-profile" class="col button button-large button-fill g-button-wide" type="submit">Update</button>
</div>
</div>
</div>
</form>
$( "#edit-profile-form" ).submit(function( event ) {
event.preventDefault();
var formData = new FormData();
var files = $('#file_input')[0].files;
formData.append( 'profile_pic', $('#file_input')[0].files[0]);
formData.append("name", $( "#fullname" ).val() );
formData.append("email", $( "#email" ).val() );
formData.append("phone", $( "#phone" ).val() );
formData.append("address", $( "#address" ).val() );
formData.append("state", $( "#state" ).val() );
formData.append("lga", $( "#lga" ).val() );
formData.append("id", $('#id') ); // MY ISSUE
formData.append("vehicle_specialization", $( "#vehicle_specialization" ).val() );
formData.append("work_specialization", $( "#work_specialization" ).val() );
formData.append("years_of_practice", $( "#years_of_practice" ).val() );
formData.append("guarantor_name", $( "#guarantor_name" ).val() );
formData.append("workshop_address", $( "#workshop_address" ).val() );
formData.append("user-id", $( "#user-id" ).val() );
//formData.append('file',files[0]);
$.ajax({
url: app.data.settings.apiUrl + "/api/v1/edit-mech-data",
method: "POST",
data: formData,
cache: false,
mimeType: 'multipart/form-data',
processData: false,
contentType: false,
}).done(function(data) {
// SOME CODE HERE...
}