Sep 2, 2018
0
Level 6
Vue js , axios submit the form new FormData
Hi everyone, I have a vue form with text inputs and with 2 image upload i try to submit the form to my controller but since i added the image upload function it doesnt work. I know that i have to do
var data = new FormData(e.target);
Basically I woul like to send all the data with 2 images to the registerController but i dont know how to add data to the new FormData
Here is my app.js
require('./bootstrap');
import 'fontawesome-pro/js/all.min.js';
window.Vue = require('vue');
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import 'vue-multiselect/dist/vue-multiselect.min.js';
import Multiselect from 'vue-multiselect';
// es modules
import Editor from '@tinymce/tinymce-vue';
// commonjs require
require('@tinymce/tinymce-vue');
Vue.use(Multiselect);
Vue.use(flatPickr);
Vue.component('example-component', require('./components/ExampleComponent.vue'));
class Errors {
constructor() {
this.errors = {};
}
get(field) {
if (this.errors[field]) {
return this.errors[field][0];
}
}
record(errors) {
this.errors = errors;
}
clear(field) {
delete this.errors[field];
}
}
new Vue({
el: '#regapp',
data: {
username: '',
email: '',
password: '',
password_confirmation: '',
privatesale: 'no',
privdatestartdate: null,
privdateenddate: null,
privatetimed: false,
privatesalebonus: '',
privatesalemincont: '',
presale: 'no',
prestartdate: null,
preenddate: null,
presaletimed: false,
presalebonus: '',
presalemincont: '',
whitelist: 'no',
whiteliststart: null,
whitelistend: null,
whitelisttimed: false,
whitelisturl: '',
iconame: '',
ticker: '',
mainstartdate: null,
mainenddate: null,
icodated: false,
category: '',
platform: '',
type: '',
content: '',
tokenforsale: '',
accepted: '',
basicrate: '',
website: '',
whitepaper: '',
kyc: '',
aml: '',
tokensupply: '',
logoupload: '',
imageupload: '',
facebooklink: '',
twitterlink: '',
ytvideo: '',
vmvideo: '',
telegramlink: '',
githublink: '',
mediumlink: '',
redditlink: '',
bitcointalklink: '',
errors: new Errors(),
selectedValue: null,
config: {
enableTime: true,
dateFormat: "d.m.Y H:i",
minuteIncrement: 60,
onReady: function ( dateObj, dateStr, instance ) {
const $close = $( ' <button class="btn btn-danger" type="button"><i class="far fa-window-close"></i></button>' )
.on( 'click', () => {
instance.clear();
instance.close();
} )
.appendTo( $( instance.calendarContainer ) );
}
},
teams:[
{
name: '',
role: '',
linkedin: '',
profileimg: ''
}
],
},
components: {
'editor': Editor // <- Important part
},
methods: {
// form submit resz -------------------
onSubmit(e){
var data = new FormData(e.target);
data.append('logoupload', this.onSubmit.logoupload);
console.log(data);
axios.post('register', data )
.then(response => alert('Success'))
.catch(error => this.errors.record(error.response.data.errors));
},
// logo upload ---------------------------
onfilechange(e) {
if (! e.target.files.length) return;
let logoupload = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(logoupload);
reader.onload = (e) => {
this.logoupload = e.target.result;
};
},
removeimage: function (e) {
this.logoupload = '';
},
// Imagae upload ----------------------------
onfilechange2(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createimage2(files[0]);
},
createimage2(file) {
var imageupload = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
vm.imageupload = e.target.result;
};
reader.readAsDataURL(file);
},
removeimage2: function (e) {
this.imageupload = '';
},
// add team members ------------------------
addnewteamform () {
this.teams.push({
name: '',
role: '',
linkedin: '',
profileimg: ''
})
},
deleteteamform (index) {
this.teams.splice(index, 1)
}
}
});
});
RegisterController
<?php
namespace App\Http\Controllers\Auth;
use App\User;
use App\Ico;
use App\Role;
use App\Team;
use Auth;
use Storage;
use File;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use Illuminate\Foundation\Auth\RegistersUsers;
class RegisterController extends Controller
{
/*
|--------------------------------------------------------------------------
| Register Controller
|--------------------------------------------------------------------------
|
| This controller handles the registration of new users as well as their
| validation and creation. By default this controller uses a trait to
| provide this functionality without requiring any additional code.
|
*/
use RegistersUsers;
/**
* Where to redirect users after registration.
*
* @var string
*/
protected $redirectTo = '/home';
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest');
}
protected $request;
public function __contruct(Request $request)
{
$this->request = $request;
}
/**
* Get a validator for an incoming registration request.
*
* @param array $data
* @return \Illuminate\Contracts\Validation\Validator
*/
protected function validator(array $request)
{
return Validator::make($request, [
'username' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|min:6|regex:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/',
'iconame' => 'required|string|max:255',
'ticker' => 'required|string',
'category' => 'required|string',
'platform' => 'required|string',
'type' => 'required|string',
'website' =>'required|string',
'kyc' => 'required|string',
'aml' => 'required|string',
'filest' => 'required|image',
'imageupload' => 'required|image',
]);
}
/**
* Create a new user instance after a valid registration.
*
* @param array $data
* @return \App\User
* @return \App\Ico
* @return \App\Team
*/
protected function create( array $data)
{
$user = new User();
$user->name = $data['username'];
$user->email = $data['email'];
$user->password = Hash::make($data['password']);
$user->save();
$user->attachRole('icouser');
/*Logo Upload*/
$request = request();
$logo = $request->file('logoupload');
$logoname = uniqid($user->id."_").".".$logo->getClientOriginalExtension();
Storage::disk('s3')->put($logoname, File::get($logo), 'public');
$logourl = Storage::disk('s3')->url($logoname);
/*ImageUpload*/
$request = request();
$image = $request->file('imageupload');
$imagename = uniqid($user->id."_").".".$image->getClientOriginalExtension();
Storage::disk('s3')->put($imagename, File::get($image), 'public');
$imageurl = Storage::disk('s3')->url($imagename);
/*checkbox values*/
/*if (!isset($data['privatetimed'])) {
$data['privatetimed'] = "no";
}
if (!isset($data['whitelisttimed'])) {
$data['whitelisttimed'] = "no";
}
if (!isset($data['presaletimed'])) {
$data['presaletimed'] = "no";
}
if (!isset($data['icodated'])) {
$data['icodated'] = "no";
}
*/
/*timeformat*/
if ($data['privatestartdate'] == 0 ) {
}else{
$data['privatestartdate'] = date('Y-m-d H:i:s', strtotime($data['privatestartdate']));
}
if ($data['privateenddate'] == 0 ){
}else{
$data['privateenddate'] = date('Y-m-d H:i:s', strtotime($data['privateenddate']));
}
if ($data['whiteliststart'] == 0 ){
}else{
$data['whiteliststart'] = date('Y-m-d H:i:s', strtotime($data['whiteliststart']));
}
if ($data['whitelistend'] == 0 ){
}else{
$data['whitelistend'] = date('Y-m-d H:i:s', strtotime($data['whitelistend']));
}
if ($data['prestartdate'] == 0 ){
}else{
$data['prestartdate'] = date('Y-m-d H:i:s', strtotime($data['prestartdate']));
}
if ($data['preenddate'] == 0 ){
}else{
$data['preenddate'] = date('Y-m-d H:i:s', strtotime($data['preenddate']));
}
if ($data['mainstartdate'] == 0 ){
}else{
$data['mainstartdate'] = date('Y-m-d H:i:s', strtotime($data['mainstartdate']));
}
if ($data['mainenddate'] == 0 ){
}else{
$data['mainenddate'] = date('Y-m-d H:i:s', strtotime($data['mainenddate']));
}
$ico = new Ico();
$ico->iconame = $data['iconame'];
$ico->ticker = $data['ticker'];
$ico->user_id = $user->id;
$ico->description = $data['content'];
$ico->logo = $logourl;
$ico->image = $imageurl;
$ico->privatesale = $data['privatesale'];
$ico->privatestartdate = $data['privatestartdate'];
$ico->privateenddate = $data['privateenddate'];
$ico->privatetimed = $data['privatetimed'];
$ico->privatesalebonus = $data['privatesalebonus'];
$ico->privatesalemincont = $data['privatesalemincont'];
$ico->whitelist = $data['whitelist'];
$ico->whiteliststart = $data['whiteliststart'];
$ico->whitelistend = $data['whitelistend'];
$ico->whitelisttimed = $data['whitelisttimed'];
$ico->whitelisturl = $data['whitelisturl'];
$ico->presale = $data['presale'];
$ico->prestartdate = $data['prestartdate'];
$ico->preenddate = $data['preenddate'];
$ico->presaletimed = $data['presaletimed'];
$ico->prebonus = $data['prebonus'];
$ico->premincont = $data['premincont'];
$ico->mainstartdate = $data['mainstartdate'];
$ico->mainenddate = $data['mainenddate'];
$ico->icodated = $data['icodated'];
$ico->category = $data['category'];
$ico->platform = $data['platform'];
$ico->type = $data['type'];
$ico->tokensupply = $data['tokensupply'];
$ico->tokenforsale = $data['tokenforsale'];
$ico->accepted = $data['accepted'];
$ico->basicrate = $data['basicrate'];
$ico->website = $data['website'];
$ico->whitepaper = $data['whitepaper'];
$ico->kyc = $data['kyc'];
$ico->aml = $data['aml'];
$ico->restrictedcountries = $data['selectedValue'];
$ico->facebooklink = $data['facebooklink'];
$ico->twitterlink = $data['twitterlink'];
$ico->ytvideo = $data['ytvideo'];
$ico->vmvideo = $data['vmvideo'];
$ico->telegramlink = $data['telegramlink'];
$ico->githublink = $data['githublink'];
$ico->mediumlink = $data['mediumlink'];
$ico->redditlink = $data['redditlink'];
$ico->bitcointalklink = $data['bitcointalklink'];
$ico->save();
if ($data['teamname'][0] != NULL) {
foreach ($data['teamname'] as $key => $teamname) {
$team = new Team();
$request = request();
$logo = $request->file(['teamprofpic'])[$key];
$logoname = uniqid($user->id."_").".".$logo->getClientOriginalExtension();
Storage::disk('s3')->put($logoname, File::get($logo), 'public');
$url = Storage::disk('s3')->url($logoname);
$team->ico_id = $ico->id;
$team->tmembername = $teamname;
$team->tmembertile = $data['teamrole'][$key];
$team->tmemberlinkedin = $data['teamlinkedin'][$key];
$team->tmemberimage = $url;
$team->save();
}
}
return $user;
}
}
Please or to participate in this conversation.