I've got a server that accepts the DELETE request from Filepond just fine. However, I am having a hard time trying to find the filename in the request. After reading, I found that it is in the Body of the DELETE request. Is that true? If so, how does my server access it? req.filename?
if(typeofreq === 'DELETE'){
var nameoffile = req.body; //<---??? How do I pull out the filename?
if(nameoffile === undefined){
res.err;
}else{
var fs = require('fs');
fs.unlinkSync('./assets/images/' + req.params(filename));
}
}
---------------------FilePond React -----------
<> <div className="Fileupload">
<FilePond ref={ref => this.pond = ref}
files={this.state.files}
name="avatar"
allowImageCrop={true}
allowMultiple={true}
method="POST"
maxFiles={5}
allowImageExifOrientation={true}
allowImagePreview={true}
imageResizeTargetWidth={600}
imageCropAspectRatio={1}
allowFileTypeValidation={true}
maxFileSize={10485760}
fetch={null}
revert={null}
allowFileEncode={true}
imageTransformVariants={{
"thumb_medium_": transforms => {
transforms.resize.size.width = 384;
return transforms;
},
'thumb_small_': transforms => {
transforms.resize.size.width = 128;
return transforms;
}
}
}
fileRenameFunction={ file => new Promise(resolve => {
resolve(window.prompt('Enter new filename', file.name)) })}
acceptedFileTypes="image/jpeg, image/png"
server= {{
url: "/photocontroller",
process: {
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
//"X-CSRF-TOKEN": $('input[name="_token"]').val()
}
},
load:'/user/getphoto'
}
}
oninit={() => this.handleInit() }
onupdatefiles={(fileItems) => {
// Set current file objects to this.state
this.setState({
files: fileItems.map(fileItem => fileItem.file)
});
}}>
</FilePond>
</div>
The problem was due to not using/understanding that axios doesn't use the body of the request but uses "data".
Related
Hi we have purchased a theme. In the theme they have include JWT based login but used fake db(dummy values) and local storage. I want to change it to our logic which uses JWT based authentication. Backend used is spring boot.
I could not fully understand the code here. In the docs, they mentioned to make changes in the authcontext file only. However, it didnt worked after I made changes in the handlelogin function(authcontext.js file). Also I gave the loginEndpoint as the backend API URL, but not sure what to replace in place of meEndpoint. If anybody gets any better idea, please try to help. Will it work properly if me make changes in the handleLogin function of authContext.js file alone? or do we have to make changes in the initAuth async function that is defined inside useEffect hook? Also what is the onSubmit function(the function which executes when login button is clicked) doing
please find the code in AuthContext.js file
import { createContext, useEffect, useState } from 'react'
// ** Next Import
import { useRouter } from 'next/router'
// ** Axios
import axios from 'axios'
// ** Config
import authConfig from 'src/configs/auth'
// ** Defaults
const defaultProvider = {
user: null,
loading: true,
setUser: () => null,
setLoading: () => Boolean,
isInitialized: false,
login: () => Promise.resolve(),
logout: () => Promise.resolve(),
setIsInitialized: () => Boolean,
register: () => Promise.resolve(),
token:null,
setToken:()=>null
}
const AuthContext = createContext(defaultProvider)
const AuthProvider = ({ children }) => {
// ** States
const [user, setUser] = useState(defaultProvider.user)
const [loading, setLoading] = useState(defaultProvider.loading)
const [isInitialized, setIsInitialized] = useState(defaultProvider.isInitialized)
const [token,setToken]=useState(defaultProvider.token)
// ** Hooks
const router = useRouter()
useEffect(() => {
const initAuth = async () => {
setIsInitialized(true)
const storedToken = window.localStorage.getItem(authConfig.storageTokenKeyName)
if (storedToken) {
setLoading(true)
await axios
.get(authConfig.meEndpoint, {
headers: {
Authorization: storedToken
}
})
.then(async response => {
setLoading(false)
setUser({ ...response.data.userData })
})
} else {
setLoading(false)
}
}
initAuth()
}, [])
const handleLogin = (params, errorCallback) => {
axios
.post(authConfig.loginEndpoint, params)
.then(async res => {
window.localStorage.setItem(authConfig.storageTokenKeyName, res.data.accessToken)
})
.then(() => {
axios
.get(authConfig.meEndpoint, {
headers: {
Authorization: window.localStorage.getItem(authConfig.storageTokenKeyName)
}
})
.then(async response => {
const returnUrl = router.query.returnUrl
setUser({ ...response.data.userData })
await window.localStorage.setItem('userData', JSON.stringify(response.data.userData))
const redirectURL = returnUrl && returnUrl !== '/' ? returnUrl : '/'
router.replace(redirectURL)
})
})
.catch(err => {
if (errorCallback) errorCallback(err)
})
}
const values = {
user,
loading,
setUser,
setLoading,
isInitialized,
setIsInitialized,
login: handleLogin,
logout: handleLogout,
register: handleRegister
}
return <AuthContext.Provider value={values}>{children}</AuthContext.Provider>
}
export { AuthContext, AuthProvider }
the authConfig file as below:-
export default {
meEndpoint: '/auth/me',
loginEndpoint: 'qortex-dev-backoffice-portal.westus2.cloudapp.azure.com:8080/auth-user/login',
registerEndpoint: '/jwt/register',
storageTokenKeyName: 'accessToken'
}
the handlesubmit function executes on login button click as shown below
const onSubmit = data => {
const { email, password } = data
auth.login({ email, password }, () => {
setError('email', {
type: 'manual',
message: 'Email or Password is invalid'
})
})
}
Login form controls code as shown below
<form noValidate autoComplete='off' onSubmit={handleSubmit(onSubmit)}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name='email'
control={control}
rules={{ required: true }}
render={({ field: { value, onChange, onBlur } }) => (
<TextField
autoFocus
label='Email'
value={value}
onBlur={onBlur}
onChange={onChange}
error={Boolean(errors.email)}
placeholder='admin#materio.com'
/>
)}
/>
{errors.email && <FormHelperText sx={{ color: 'error.main' }}>{errors.email.message}</FormHelperText>}
</FormControl>
<FormControl fullWidth>
<InputLabel htmlFor='auth-login-v2-password' error={Boolean(errors.password)}>
Password
</InputLabel>
<Controller
name='password'
control={control}
rules={{ required: true }}
render={({ field: { value, onChange, onBlur } }) => (
<OutlinedInput
value={value}
onBlur={onBlur}
label='Password'
onChange={onChange}
id='auth-login-v2-password'
error={Boolean(errors.password)}
type={showPassword ? 'text' : 'password'}
endAdornment={
<InputAdornment position='end'>
<IconButton
edge='end'
onMouseDown={e => e.preventDefault()}
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? <EyeOutline /> : <EyeOffOutline />}
</IconButton>
</InputAdornment>
}
/>
)}
/>
{errors.password && (
<FormHelperText sx={{ color: 'error.main' }} id=''>
{errors.password.message}
</FormHelperText>
)}
</FormControl>
i have been exploring back4app parse server. i am tiered of finding documentation for pdf files. I am trying to generate some pdf files on back4app parse server from its cloud function.i do not see any documentation for it. will some one guide me to find it and little enlightment will be highly appreciated.
edit:
pdf creator library out there ask for output path but in back4app we don't have early access to path. we create new file passing it data and then save it to object. how do we achieve the order.
I some how managed get it done, thank you #Davi macedo. but there is some problem, i created pdf locally(root) cloud code,deleting it each time is envitable . this could be problem for more requests.
can someone improve little bit. would be great.
Here is my code.
I have used pdf-creator-node for creating pdf.
var pdf = require("pdf-creator-node");
var fs = require("fs")
var path = require('path')
const pdf2base64 = require('pdf-to-base64');
Parse.Cloud.define("pdf", async (req) => {
//creating pdf
// var html = fs.readFileSync("template.html", "utf8");
var html = fs.readFileSync(path.resolve(__dirname, 'template.html'), {
encoding: 'utf-8' });
var options = {
format: "A3",
orientation: "portrait",
border: "10mm",
header: {
height: "45mm",
contents: '<div style="text-align: center;">Author: Shyam Hajare</div>'
},
footer: {
height: "28mm",
contents: {
first: 'Cover page',
2: 'Second page', // Any page number is working. 1-based index
default: '<span style="color: #444;">{{page}}</span>/<span>{{pages}}</span>', // fallback value
last: 'Last Page'
}
}
};
var users = [
{
name: "Shyam",
age: "26",
},
{
name: "Navjot",
age: "26",
},
{
name: "Vitthal",
age: "26",
},
];
var document = {
html: html,
data: {
users: users,
},
path: path.resolve(__dirname, './pdfs', 'my_file.pdf'),//using path is necessary
type: "",
};
return pdf
.create(document, options)
.then((res) => {
return pdf2base64(path.resolve(__dirname, "/usr/src/app/data/cloud /pdfs/my_file.pdf")) //this path /usr/src/app/data/cloud/pdfs still mystery to me.
.then(
(response) => {
// console.log(response); //cGF0aC90by9maWxlLmpwZw==
const saveFiles = async () => {
//creating file
const parseFile = new Parse.File('pdfFile.pdf',{base64:response});
// console.log(parseFile)
//saving file
const responseFile = await parseFile.save();
const Document = Parse.Object.extend('Document');
const document = new Document();
//saving it to object.
document.set('document', responseFile);
await document.save();
}
saveFiles();
}
)
.catch(
(error) => {
console.log(error); //Exepection error....
}
)
console.log(res);
})
.catch((error) => {
console.error(error);
});
});
I'm trying delete data but I'm getting this error:
this.jobPosts.filter is not a function
PostJobIndex.vue file:
deleteJobPost: async function(jobPost) {
if (!window.confirm('Are you sure you want to delete this Job Post?')) {
return;
}
try {
await employerService.deleteJobPost(jobPost.id);
this.jobPosts = this.jobPosts.filter(obj => {
return obj.id != jobPost.id;
});
console.log(this.jobPosts);
this.$toast.success("Job Post deleted Successfully!");
} catch (error) {
console.log(error);
this.$toast.error(error.response.data.message);
}
},
I had this same issue with my Update method and I beleive it was because I was trying to map through an object or something instead of an array. In the end I used Object.keys(this.jobPosts).map for my update method and it worked:
Object.keys(this.jobPosts).map(jobPost => {
if (jobPost.id == response.data.id) {
for (let key in response.data) {
jobPost[key] = response.data[key];
}
}
});
But when I do this for Update it doesn't work:
this.jobPosts = Object.keys(this.jobPosts).filter(obj => {
return obj.id != jobPost.id;
});
UPDATED
Here is the code for loading the job posts:
loadJobPosts: async function() {
try {
const response = await employerService.loadJobPosts();
this.jobPosts = response.data;
console.log(this.jobPosts);
} catch (error) {
this.$toast.error('Some error occurred, please refresh!');
}
},
Im using Vuex for state management and I'm using services, that simply contain the axios http requests. That's where this line comes from employerService.loadJobPosts() loadJobPosts() is a function inside my employerService.js file.
I'm also using Laravel for my back end. Here is my JobPostsController.php file:
public function index()
{
$jobPosts = JobPost::all()->where('user_id', Auth::user()->id);
return response()->json($jobPosts, 200);
}
From what I've understood from your code,
this should work for removing jobPost from jobPosts
this.jobPosts = this.jobPosts.filter(obj => {
return obj.id != jobPost.id;
});
I don't know what you're expecting this to do, but it won't do anything useful and will either error or return false for everything.
this.jobPosts = Object.keys(this.jobPosts).filter(obj => {
return obj.id != jobPost.id;
});
filter exists on array types, so I would check where it's getting set and make sure it's an array.
I've included a small snippet in case it's any help.
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: "#app",
data: () => {
return {
jobPosts: [],
deleteJobId: 1
};
},
methods: {
getJobPosts() {
this.jobPosts = [{
id: 1
}, {
id: 2
}, {
id: 3
}, {
id: 4
}, {
id: 5
}];
},
deleteJob() {
if (!this.deleteJobId)
return;
this.jobPosts = this.jobPosts.filter(x => x.id !== this.deleteJobId);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button type="button" #click="getJobPosts">Get Jobs</button>
<div>
<button type="button" #click="deleteJob">Delete Job #</button>
<input type="number" v-model.number="deleteJobId" />
</div>
<ul>
<li v-for="jobPost in jobPosts">
Job Post #{{jobPost.id}}
</li>
</ul>
</div>
You have already answered your own question:
in my data() object, I have this jobPosts: [], but in the console it says Object
As for your second question:
I don't know how to return the data as an array
There are similiar topics here on SO.
I am not familiar with Laravel but assuming you have an eloquent model with JobPost in your index-function according to the docs you should use the .toArray-method:
$jobPosts = JobPost::all()->where('user_id', Auth::user()->id).toArray();
When working with plain collections the values method should do the trick of returning an array instead of an object:
$collection = collect([
10 => ['product' => 'Desk', 'price' => 200],
11 => ['product' => 'Desk', 'price' => 200]
]);
$values = $collection->values();
$values->all();
UPDATE
I just realized that your result is just a stringified JSON object that needs to be converted into an array. Just parse it before processing (take out the JSON.parse(...) if you are already taking care of it in your service), return the object properties as an array and you are good to go:)
this.jobPosts = Object.values(JSON.parse(this.jobPosts)).filter(obj => {
return obj.id != jobPost.id;
});
I'm trying to upload an HEIC file with filepond. Which file type should I specify?
At the moment I have this:
accepted-file-types="image/jpeg, image/png, image/gif, image/jpg"
I can't find anything in the docs about this, and my experimentation doesn't work.
Here's the test file I'm trying to upload:
https://github.com/tigranbs/test-heic-images/raw/master/image1.heic
Thank to #Rik for pointers. Here is some code which does this using filepond in Vue. Feels slightly hacky but does the job.
Accept the image/heic content type and add a custom validator:
<file-pond
v-if="supported"
ref="pond"
name="photo"
:allow-multiple="multiple"
accepted-file-types="image/jpeg, image/png, image/gif, image/jpg, image/heic"
:file-validate-type-detect-type="validateType"
:files="myFiles"
image-resize-target-width="800"
image-resize-target-height="800"
image-crop-aspect-ratio="1"
label-idle="Drag & Drop photos or <span class="btn btn-white ction"> Browse </span>"
:server="{ process, revert, restore, load, fetch }"
#init="photoInit"
#processfile="processed"
#processfiles="allProcessed"
/>
Then in the validator check for the filename, to handle browsers that don't set the correct MIME type:
validateType(source, type) {
const p = new Promise((resolve, reject) => {
if (source.name.toLowerCase().indexOf('.heic') !== -1) {
resolve('image/heic')
} else {
resolve(type)
}
})
return p
}
Then in the process callback, spot the HEIC file and use heic2any to convert it to PNG and use that data in the upload.
async process(fieldName, file, metadata, load, error, progress, abort) {
await this.$store.dispatch('compose/setUploading', true)
const data = new FormData()
const fn = file.name.toLowerCase()
if (fn.indexOf('.heic') !== -1) {
const blob = file.slice(0, file.size, 'image/heic')
const png = await heic2any({ blob })
data.append('photo', png, 'photo')
} else {
data.append('photo', file, 'photo')
}
data.append(this.imgflag, true)
data.append('imgtype', this.imgtype)
data.append('ocr', this.ocr)
data.append('identify', this.identify)
if (this.msgid) {
data.append('msgid', this.msgid)
} else if (this.groupid) {
data.append('groupid', this.groupid)
}
const ret = await this.$axios.post(process.env.API + '/image', data, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUpLoadProgress: e => {
progress(e.lengthComputable, e.loaded, e.total)
}
})
if (ret.status === 200 && ret.data.ret === 0) {
this.imageid = ret.data.id
this.imagethumb = ret.data.paththumb
this.image = ret.data.path
if (this.ocr) {
this.ocred = ret.data.ocr
}
if (this.identify) {
this.identified = ret.data.items
}
load(ret.data.id)
} else {
error(
ret.status === 200 ? ret.data.status : 'Network error ' + ret.status
)
}
return {
abort: () => {
// We don't need to do anything - the server will tidy up hanging images.
abort()
}
}
},
The server is then blissfully unaware that the original file was HEIC at all, and everything proceeds as normal.
The format is image/heic, I tested this using this tool:
https://codepen.io/rikschennink/pen/NzRvbj
It's possible that not all browsers assign the correct mime type. You can work around that by using the fileValidateTypeDetectType property see here for an example:
https://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/#custom-type-detection
Please note that uploading will work, but previewing the image won't.
I'm making a recipe book and I want the recipes to have the choice to upload images, I'm using Element-UI in this project and they have an upload component. However, I'm not super sure how to use it correctly. I'm basing this on some code I found but it's not really working the $request I receive in the controller always has the image: null. I'm using $intertia.post but I could change to $http.post if needed.
This is what I'm trying
<el-upload
class="avatar-uploader"
action="/api/vendors/fake-upload"
accept="image/*"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.image" :src="form.image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div class="buttonImage">
<el-button v-if="form.image" class="img-button mt-1" type="warning">
Change Picture
</el-button>
</div>
</el-upload>
Relevant data() in my vue <script>
loadingImage: false,
imageFile: null,
form: {
name: '',
description: '',
image: ''
},
These are the methods that go with the <el-upload>
handleAvatarSuccess(res, file) {
this.form.image = URL.createObjectURL(file.raw);
this.loadingImage = false;
},
beforeAvatarUpload(file) {
this.imageFile = file;
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('This picture must be a JPG!');
}
if (!isLt2M) {
this.$message.error('This image is bigger than 2MB!');
}
this.loadingImage = true;
return isLt2M && isJPG;
},
This is how I'm sending it to the controller
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
if (!this.form.id) {
this.$inertia.post(this.baseUrl, {
name: this.form.name,
description: this.form.description,
category: this.category,
steps: this.steps,
ingredient: this.ingredient,
measurements: this.measurements,
image: this.imageFile
}).then(
() => {
this.recipe = this.$page.recipe;
this.$message({
type: 'success',
message: 'Created correctly.'
});
this.loading = false
},
(res) => {
this.$message.error(parseError(res)[0]);
this.loading = false;
})
}
} else {
return false;
}
this.reset();
});
},
What's the correct way to do this, or is there an easier way?