The goal is to upload the columns from the csv into the SQL Pro database. I am able to select the column names that have been uploaded from the csv file, the columns from the csv file are then uploaded into the option dropdown. In return I need to submit the selections that have been selected from the options dropdown, into the database. I am writing this in PHP. What I have is definitely not correct.
PHP
public function csvProcess(Request $request)
{
$contact = newContact();
$contact->first_name = $rowProperties[$mapping['column_first_name']];
$contact->last_name = $rowProperties[$mapping['column_last_name']];
//$contact->newContact()->attach($first_name[$mapping['column_first_name']]);
store(newContact()->where->$columnNames=$firstrow());
$result = create($this(newContact()));
$contact->save();
}
HTML
<h1 class="mb-7 m-5 ml-6 font-bold text-2xl"> Contact Fields</h1>
<div v-for="field in requiredContactFields" class="p-8 -mr-6 -mb-8 flex flex-wrap" style="width:150px">
<label :for="field" type="select" name="field">{{field}}</label>
<select :id="field" :name="field" v-model="mapping[field]"required>
<option value="">Please Select</option>
<option v-for="columnName in columnNames" :name="columnName" :value="columnName" value="">{{columnName}}</option>
</select>
</div>
Javascript
submitFiles()
{
//Form validation that will not allow a user to submit the form by upon the @click event
if(!this.$refs.csvFile.checkValidity())
{
return null;
}
let formData = new FormData();
formData.append('file', this.file);
axios.post('http://localhost:8080/api/contacts/upload-csv',
formData,
{
headers:
{
'Content-Type': 'multipart/form-data'
}
}
)
.then(function(response){
console.log('SUCCESS!!');
console.log(response);
})
.catch(function(response){
console.log('FAILURE!!');
console.log(response);
})
}
}
}
</script>