Before everything, this is not duplicate.
How can i get my Axios parameters from URL for my GET request?
Example:
Link : http://127.0.0.1:8000/callback?Authority=000000000000000000000000000107041762&Status=OK
So parameters are Authority And Status
Authority: How to get this parameters from url
Status: How to get this parameters from url
I'm using laravel & vue.js which the codes are :
callback.vue:
<template>
<div>
TEXT
</div>
</template>
<script>
export default {
name: "callback",
data () {
return {}
},
methods: {
loadData(){
axios.get("api/callback", {
Authority: ,
Status
})
.then(({ data }) => (
console.log(data)
));
},
},
created() {
this.loadData();
}
}
Controller function :
public function order(Request $request){
$MerchantID = 'xxxx';
$Authority =$request->get('Authority') ;
$Amount = 111 ;
if ($request->get('Status') == 'OK') {
$client = new nusoap_client('https://localhost/ices/WebGate/wsdl', 'wsdl');
$client->soap_defencoding = 'UTF-8';
$result = $client->call('PaymentVerification', [
[
'MerchantID' => $MerchantID,
'Authority' => $Authority,
'Amount' => $Amount,
],
]);
if ($result['Status'] == 100) {
return 'Done';
} else {
return 'Error 1';
}
}
else
{
return 'Error 2';
}
You need to use {params: {}} to pass url query to axios.get
axios.get("api/callback", {
params: {
Authority: ''
Status: 'OK'
}
})
.then(({
data
}) => (
console.log(data)
));
You may do this like so:
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
Usage
Example URL:
http://www.example.com/index.php?id=1&image=awesome.jpg
Calling getQueryVariable("id") - would return "1".
Calling getQueryVariable("image") - would return "awesome.jpg".
Taken from here
Related
I am looking to download an image stored on a server into my React Native app.
I had a function that looked like this:
public function image(Request $request, $id)
{
$company = Company::find($id);
$filePath = storage_path() . '/app/' . $company->image;
return response()->file($filePath);
}
And it returned nothing I could read within the app when I tried the following function:
setCompany = async () => {
let company = await AsyncStorage.getItem('currentCompany');
company = JSON.parse(company);
if (company.image !== null) {
let image = await getCompanyPicture({company_id: company.id});
console.log('Here: ', image);
// This is blank, react native returns a warning about data not being of a readable type
}
this.setState({company});
};
I am able to get the image in base_64 using this method:
public function image(Request $request, $id)
{
$company = Company::find($id);
$file_path = storage_path('/app/' . $company->image);
if (file_exists($file_path)) {
$fileData = file_get_contents($file_path);
$fileEncode = base64_encode($fileData);
return response()->json(['status' => 'success', 'data' => ['file' => $fileEncode, 'file_path' => $file_path]]);
}
return response()->json(['status' => 'failure', 'data' => ['file' => null, 'file_path' => $file_path]]);
}
Here is my Axios method too just in case:
export const sendRequest = async (url, data, token, method) => {
let headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Method': 'POST, GET, DELETE, PUT',
};
if (typeof token !== 'undefined' && token !== 'undefined' && token.length) {
headers.Authorization = 'Bearer ' + token;
}
if (method === 'get' && data) {
url +=
'?' +
Object.keys(data)
.map((value) => {
return value + '=' + data[value];
})
.join('&');
data = null;
}
return await axios({
headers: headers,
method: method ? method : 'post',
url: url,
data: data,
})
.then((response) => {
return response;
})
.then((json) => {
return json.data;
})
.catch((error) => {
console.error(error);
if (
error.message !== 'Network Error' &&
error.response.status !== 500 &&
error.response.status !== 413
) {
return error.response.data;
} else if (error.message === 'Network Error') {
return {
status: 'error',
message: 'Unable to connect to server',
};
} else if (error.response.status === 500) {
return {
status: 'error',
message: 'Internal Server Error',
};
} else if (error.response.status === 413) {
return {
status: 'error',
message: 'The file(s) size is too large',
};
} else {
return {
status: 'error',
message: error.message,
};
}
});
};
If anyone could comment on the performance impact of using base_64 instead of the straight file download that would also be helpful
But ultimately I would like a solution for handling the Laravel response()->file() if possible (which I'll use if base_64 is less efficient)
I'm not sure about RN code syntax, but I've ready code with jQuery+poorJS, which looks like this:
$.ajax({
url: "load-image-url", // URL FOR GET REQUEST
cache:false,
xhr: function() { // ACTUALLY THIS PART CAN BE USED AND CUSTOMIZED BY YOU
let xhr = new XMLHttpRequest();
xhr.responseType= 'blob'
return xhr;
},
success: function(data) {
let url = window.URL || window.webkitURL;
$('#image').attr('src', url.createObjectURL(data));
},
error: function(err) {
// console.log(err);
}
}).fail(function() {
$('#ss_product_image').attr('src', "default-image-url.jpg");
});
In my example I've used GET request (but you can try to modify it and test if you want, honestly IDK about that).
This is the back-end part:
public function image(Request $request, $id)
{
// HERE YOU NEED TO GET YOUR IMAGE (using $id or/and $request params) CONTENT FROM SOMEWHERE YOU WANT
$content = <CONTENT>;
return response()->make($content, 200, [
'Content-Type' => (new \finfo(FILEINFO_MIME))->buffer($content),
'Content-length' => strlen($content),
]);
}
I was able to solve this issue by using rn-blob-fetch.
The files are downloaded into a temp cache which can then be accessed for previewing and saving.
this is my function now:
downloadFiles = async (isReply) => {
let {enquiry, reply} = this.state;
this.setState({isLoading: true});
const token = await AsyncStorage.getItem('userToken');
let filePaths = [];
let fileCount = 0;
let files = enquiry.files;
if (isReply) {
files = reply.files;
}
const dirToSave =
Platform.OS == 'ios'
? RNFetchBlob.fs.dirs.DocumentDir
: RNFetchBlob.fs.dirs.DownloadDir;
new Promise((resolve, reject) => {
for (var i = 0; i < files.length; i++) {
var id = files[i].file_id;
var name = files[i].file.file_name;
var ext = extension(name);
const configOptions = Platform.select({
ios: {
appendExt: ext,
fileCache: true,
title: name,
path: `${dirToSave}/${name}`,
},
android: {
useDownloadManager: true,
notification: true,
mediaScannable: true,
fileCache: true,
title: name,
path: `${dirToSave}/${name}`,
},
});
var mime = content(ext);
let headers = {
'Content-Type': mime,
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Method': 'POST, GET, DELETE, PUT',
Authorization: 'Bearer ' + token,
};
RNFetchBlob.config(configOptions)
.fetch('GET', BASE_API + '/enquiries/files/download/' + id, headers)
.then(async (response) => {
RNFetchBlob.fs.writeFile(
configOptions.path,
response.data,
'base64',
);
filePaths.push({
title: configOptions.title,
path: configOptions.path,
ext: extension(configOptions.title),
mime,
});
fileCount++;
if (fileCount >= files.length) {
resolve('Download Successful!');
}
})
.catch((error) => {
console.log('File Download Error: ', error.message);
reject('Download Failed');
});
}
})
.then((data) => {
this.setState({isLoading: false, filePaths});
})
.catch((error) => {
console.log('Download Promise Error: ', error);
this.setState({isLoading: false});
});
};
previewDocument = (id) => {
let {filePaths} = this.state;
if (Platform.OS == 'ios') {
RNFetchBlob.ios.openDocument(filePaths[id].path);
} else if (Platform.OS == 'android') {
RNFetchBlob.android.actionViewIntent(
filePaths[id].path,
filePaths[id].mime,
);
}
};
I setup future payment in my laravel app with stripe. However, after following stripe integration from stripe official doc I encountered this error response.
Here's my script:
<script>
var stripeSetupIntent = function (stripe, setupIntent) {
const email = document.getElementById("stripe-email").value;
stripe.confirmCardSetup(setupIntent.client_secret,
{
payment_method: {
card: card,
billing_details: {
name: email,
},
},
}
).then(function(result) {
if (result.error) {
// Display error.message in your UI.
console.log('Error: ', result.error)
// var displayError = document.getElementById("card-errors");
// displayError.textContent = result.error.message;
} else {
console.log('Sucess')
// The setup has succeeded. Display a success message.
}
});
};
var getSetupIntent = function(stripe) {
axios.post('/api/createcustomerinstripe').then(function (response) {
console.log('getSetupIntent: ', response.data.setupIntent)
stripeSetupIntent(stripe, response.data.setupIntent)
})
};
$(document).ready(function () {
let stripe = null;
//get stripe public key
axios.get('/api/stripe-key').then(function (response) {
stripe = Stripe(response.data.publicKey);
const elements = stripe.elements();
const card = elements.create('card');
card.mount('#card-element');
})
var button = document.getElementById("savecard");
button.addEventListener("click", function(event) {
event.preventDefault();
// changeLoadingState(true);
getSetupIntent(stripe)
});
})
</script>
Backend code:
Controller:
public function getStripeKey()
{
$publicKey = env('STRIPE_KEY');
$data = [
'message' => 'Stripe key successfully retrieved.',
'publicKey' => $publicKey
];
return response()->json($data, 200, [], JSON_PRETTY_PRINT);
}
public function CreateCustomerInStripe()
{
Stripe::setApiKey(env('STRIPE_SECRET'));
$customer = Customer::create([
'email' => auth()->user()->email
]);
$setupIntent = SetupIntent::create([
'customer' => $customer->id
]);
$data = [
'message' => 'A new SetupIntent was created.',
'setupIntent' => $setupIntent
];
return response()->json($data, 200, [], JSON_PRETTY_PRINT);
}
Backend code web:
Route::get('stripe-key', 'api\StripePaymentController#getStripeKey')->name('stripe.key');
Route::post('createcustomerinstripe', 'api\StripePaymentController#CreateCustomerInStripe')->name('createcustomerinstripe');
I use the stripe documentation here https://stripe.com/docs/payments/save-and-reuse#web-test-integration
stripe version:
<script src="https://js.stripe.com/v3/"></script>
laravel version:
https://laravel.com/docs/7.x/billing
I created a simple system for commenting posts or videos. Everything works fine.
A function called loadComments() shows comments related to posts or videos.
When a user submits a new comment, the comment is created, but in order to view the new comment I have to refresh the page because I receive an undefined response.
Here the store function in the controller
public function store(Request $request)
{
$comments = Comment::create([
'comment' => $request->comment,
'user_id' => auth()->user()->id,
'post_id' => $request->post_id
]);
return response()->json([
'comments' => $comments,
'success' => 'Comment created successfully!'
],200);
}
Here the addComment method:
addNewComment() {
const formData = {
comment: this.comment,
post_id: this.propsVideoid
}
axios
.post(this.commentsUri, formData)
.then(response => {
this.comments.unshift(response.data.comments)
})
.catch(error => {
this.errors = [];
if(error.response.status == 422) {
this.errors = error.response.data.errors;
}
})
},
Here the load and add methods together
addNewComment() {
const formData = {
comment: this.comment,
post_id: this.propsVideoid
}
axios
.post(this.commentsUri, formData)
.then(response => {
this.comments.unshift(response.data.comments)
})
.catch(error => {
this.errors = [];
if(error.response.status == 422) {
this.errors = error.response.data.errors;
}
})
},
loadComments() {
axios.get(this.commentsListUri, {
params: {
post_id: this.propsVideoid
}
}).then(response => {
this.comments = response.data.comments;
});
},
},
mounted() {
this.loadComments();
}
The addNewComment() method inserts the new comment in the database, but it does not return any json response.
I try to do a single post request to upload multiple files. Now I have a functionally method that works for multiple files. But I want a single request.
submitFile(){
this.contract_file.forEach((file) =>{
let formData = new FormData();
formData.append('file', file.file);
axios.post('contracts/uploadfile/' + this.id_contract,
formData,
{
headers: {
'Content-Type': 'multipart/form-data',
}
}
).then(function(){
//
})
.catch(function(){
//
});
})
},
public function uploadFile(Request $request, Contract $contract)
{
$filename = $request->file('file')->getClientOriginalName();
$path = $request->file('file')->store($contract->id,'uploads');
$contractFile = new ContractFile();
$contractFile->fill([
'contract_id' => $contract->id,
'name' => $filename,
'path' => $path,
])->save();
}
Update:
This is what I changed,but..
let formData = []
this.contract_file.forEach((file,index) =>{
formData[index] = new FormData();
formData[index].append('file', file.file);
})
foreach($request->file('file') as $file){
//same code but I use $fille
}
Message:
Missing boundary in multipart/form-data POST data in Unknown
Update2:
<file-upload
class="btn btn-primary"
:multiple="true"
:drop="true"
:drop-directory="true"
v-model="files"
#input-filter="inputFilter"
#input-file="inputFile"
ref="upload">
<i class="fa fa-plus"></i>
Select files
</file-upload>
My answer is not properly tested since I had to adapt my code. Let me know if it doesn't work or if I'm missing something.
Basically, I built my own FormData to be more flexible and easier to reuse.
Form.vue
<template>
<div>
<input #change="upload($event)"
type="file"
name="picture"
id="new-file"
class="custom-file-input"
aria-label="picture"
multiple
>
<label class="custom-file-label" for="new-file">
<span>File...</span>
<span class="btn-primary">Browse</span>
</label>
<button #click="submit" type="button" >Submit</button>
</div>
<template>
<script>
import MyFormData from "./MyFormData";
export default {
data() {
return {
form: new MyFormData({contract_id: 5, files: []})
}
},
methods: {
upload(event) {
for (let file of event.target.files) {
try {
let reader = new FileReader();
reader.readAsDataURL(file); // Not sure if this will work in this context.
this.form.files.push(file);
} catch {}
}
},
submit(){
this.form.post('/my-url')
.catch(errors => {
throw errors;
})
.then((response) => location = response.data.redirect);
}
}
}
</script>
MyFormData.js
export default class MyFormData {
constructor(data, headers) {
// Assign the keys with the current object MyFormData so we can access directly to the data:
// (new FormData({myvalue: "hello"})).myvalue; // returns 'hello'
Object.assign(this, data);
// Preserve the originalData to know which keys we have and/or reset the form
this.originalData = JSON.parse(JSON.stringify(data));
this.form = null;
this.errors = {};
this.submitted = false;
this.headers = headers || {}
}
// https://stackoverflow.com/a/42483509/8068675
// It will build a multi-dimensional Formdata
buildFormData(data, parentKey) {
if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File) && !(data instanceof Blob)) {
Object.keys(data).forEach(key => {
this.buildFormData(data[key], parentKey ? `${parentKey}[${key}]` : key);
});
} else {
const value = data == null ? '' : data;
this.form.append(parentKey, value);
}
}
// Returns all the new / modified data from MyFormData
data() {
return Object.keys(this.originalData).reduce((data, attribute) => {
data[attribute] = this[attribute];
return data;
}, {});
}
post(endpoint) {
return this.submit(endpoint);
}
patch(endpoint) {
return this.submit(endpoint, 'patch');
}
delete(endpoint) {
return axios.delete(endpoint, {}, this.headers)
.catch(this.onFail.bind(this))
.then(this.onSuccess.bind(this));
}
submit(endpoint, requestType = 'post') {
this.form = new FormData();
this.form.append('_method', requestType);
this.buildFormData(this.data());
return axios.post(endpoint, this.form, {
headers: {
'Content-Type': `multipart/form-data; boundary=${this.form._boundary}`,
}
})
.catch(this.onFail.bind(this))
.then(this.onSuccess.bind(this));
}
onSuccess(response) {
this.submitted = true;
this.errors = {};
return response;
}
onFail(error) {
console.log(error);
this.errors = error.response.data.errors;
this.submitted = false;
throw error;
}
reset() {
Object.assign(this, this.originalData);
}
}
Edit Based on your note specifying you're using vue-upload-component
Your submit method should look like this
submitFile(){
let files = this.contract_file.map((obj) => obj.file));
let form = new MyFormData({files: files});
form.post('contracts/uploadfile/' + this.id_contract)
.then(function(){
//
})
.catch(function(){
//
});
},
In your controller
public function uploadFile(Request $request, Contract $contract) {
if($request->hasFile('files')){
$files = $request->file('files');
foreach ($files as $file) {
$filename = $file->getClientOriginalName();
$path = $file->store($contract->id,'uploads');
$contractFile = new ContractFile();
$contractFile->fill([
'contract_id' => $contract->id,
'name' => $filename,
'path' => $path,
])->save();
}
}
}
Adding the boundary to the Content-Type header fixed my problem. You can do it like below. Just change only submitFile() function.
submitFile(){
this.contract_file.forEach((file) =>{
let formData = new FormData();
formData.append('file', file.file);
axios.post('contracts/uploadfile/' + this.id_contract,
formData,
{
headers: {
'Content-Type': 'multipart/form-data;boundary=' + Math.random().toString().substr(2),
}
}
).then(function(){
//
})
.catch(function(){
//
});
})
},
In app.js -> methods i have this.chat.image.push(''); and in axios.post send i have
methods:{
send(){
if(this.message.length != 0)
{
this.chat.message.push(this.message);
this.chat.user.push('');
this.chat.image.push('');
this.chat.time.push('');
axios.post('admin/send', {
message : this.message,
chat:this.chat
})
.then(response => {
// console.log(response);
this.message = '';
})
}
},
getOldMessages(){
axios.post('admin/getOldMessage')
.then(response => {
if (response.data != '') {
this.chat = response.data;
}
})
},
And in mounted() i have
mounted(){
this.getOldMessages();
Echo.channel('chat')
.listen('ChatEvent', (e) => {
this.chat.message.push(e.message);
this.chat.user.push(e.user);
this.chat.image.push('source/admin/assets/images/avatar/'+e.image);
axios.post('admin/saveToSession',{
chat : this.chat
.then(response => {
console.log(response);
})
})
})
}
In Controller i have function saveToSession
public function saveToSession(request $request)
{
session()->put('chat',$request->chat);
}
In send() function i get image=" "; but when I save to the session it returns null, How come it returns to the value = " " ? Thanks
Check that value in $request->chat are coming properly or not if yes then you can try other methods as well
Via a request instance
$request->session()->put('key', 'value');
Via the global helper
session(['key' => 'value']);