[Bug filetype keeps changing from image mimetype]
Closed this issue · 0 comments
Is there an existing issue for this?
- I have searched the existing issues
Have you updated Vue FilePond, FilePond, and all plugins?
- I have updated FilePond and its plugins
Describe the bug
Sometimes when I upload an image it is uploaded as the actual file, in my case its a mimetype: image/jpeg. However a few minutes later it can turn to mimetype: application/octet-stream
here is a copy and paste of dd in laravel
^ Illuminate\Http\Request {#43
+attributes: Symfony\Component\HttpFoundation\ParameterBag {#45
#parameters: []
}
+request: Symfony\Component\HttpFoundation\InputBag {#44
#parameters: array:1 [
"avatar" => "{"color":null}"
]
}
+query: Symfony\Component\HttpFoundation\InputBag {#51
#parameters: []
}
+server: Symfony\Component\HttpFoundation\ServerBag {#48
#parameters: array:42 [
"REDIRECT_STATUS" => "200"
"HTTP_HOST" => "192.168.0.2:84"
"HTTP_CONNECTION" => "keep-alive"
"CONTENT_LENGTH" => "2368642"
"HTTP_PRAGMA" => "no-cache"
"HTTP_CACHE_CONTROL" => "no-cache"
"HTTP_DNT" => "1"
"HTTP_X_CSRF_TOKEN" => "HS4iBsWFFtGoNn8pD3VJdn1n8K827IteDq0KmXKt"
"HTTP_USER_AGENT" => "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.82 Safari/537.36"
"CONTENT_TYPE" => "multipart/form-data; boundary=----WebKitFormBoundaryaxwTGvBKwTzBnFV0"
"HTTP_ACCEPT" => "/"
"HTTP_ORIGIN" => "http://192.168.0.2:84"
"HTTP_REFERER" => "http://192.168.0.2:84/register"
"HTTP_ACCEPT_ENCODING" => "gzip, deflate"
"HTTP_ACCEPT_LANGUAGE" => "en-GB,en-US;q=0.9,en;q=0.8"
"HTTP_COOKIE" => "default-theme=ngax; XSRF-TOKEN=eyJpdiI6IkZDNkFMMTl5NXpXZ2tlME1teTE5bEE9PSIsInZhbHVlIjoiMEhWN1hzVHhOSWpnenIxaUN0aTN5SGJrcmlDaU0zNTh1MEczeFNtSWFRMFFZMGN0WFl0K3M5NGY1K0NuMXpQN1U1N0lSelcySHNtMTRJSkZWUWdBUGFtdTBsbmFtYzJCQVZhVmhUQjhMTnRqaUdnb09rTzRlMk96dFN6eGNoT3MiLCJtYWMiOiJmMjNjNzU2YWQwYjQwNzAzNmNiZjMzNWY5NjBkYTgzYmIwZTYyNzcxMTIzOWUxN2FkYTI1N2Y3ZWZkMWFhN2JlIiwidGFnIjoiIn0%3D; laravel_session=eyJpdiI6IllDZUJORkNpSjd0TSsvWTBWbW56Y1E9PSIsInZhbHVlIjoiUGtWVThpcFdzdEhLak8zV08yQ3ZHSmQzWTVoMSswZEpTVmZuWHRWOWxJSVltc0x4MzBkNS9vQnFZeUJoMXpZSFBRNU1vdVZZRTFpL0N5MWNINEh3ZnlPd01Rekh3endYNjRQb1E5bGRnODIvMTZVd0pzY2lhUE0wYTZVVzVIbDciLCJtYWMiOiI5MTI2NjE1N2VkMjY2MjI2YzYxZGJmM2EyZTZkMTU4MDI5MzMzYWU1NTFlYmM4OTc0MjljNTYyYTc0MTAxOGRkIiwidGFnIjoiIn0%3D; x-clockwork=%7B%22requestId%22%3A%221647996184-4899-264569022%22%2C%22version%22%3A%225.1.5%22%2C%22path%22%3A%22%5C%2F__clockwork%5C%2F%22%2C%22webPath%22%3A%22%5C%2Fclockwork%5C%2Fapp%22%2C%22token%22%3A%22c79b58ff%22%2C%22metrics%22%3Atrue%2C%22toolbar%22%3Atrue%7D"
"PATH" => "/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"
"SERVER_SIGNATURE" => "
"SERVER_SOFTWARE" => "Apache/2.4.52 (Debian)"
"SERVER_NAME" => "192.168.0.2"
"SERVER_ADDR" => "172.17.0.4"
"SERVER_PORT" => "84"
"REMOTE_ADDR" => "192.168.0.20"
"DOCUMENT_ROOT" => "/var/www/html/public"
"REQUEST_SCHEME" => "http"
"CONTEXT_PREFIX" => ""
"CONTEXT_DOCUMENT_ROOT" => "/var/www/html/public"
"SERVER_ADMIN" => "webmaster@localhost"
"SCRIPT_FILENAME" => "/var/www/html/public/index.php"
"REMOTE_PORT" => "61048"
"REDIRECT_URL" => "/tmp/image"
"GATEWAY_INTERFACE" => "CGI/1.1"
"SERVER_PROTOCOL" => "HTTP/1.1"
"REQUEST_METHOD" => "POST"
"QUERY_STRING" => ""
"REQUEST_URI" => "/tmp/image"
"SCRIPT_NAME" => "/index.php"
"PHP_SELF" => "/index.php"
"REQUEST_TIME_FLOAT" => 1647996190.7154
"REQUEST_TIME" => 1647996190
"argv" => []
"argc" => 0
]
}
+files: Symfony\Component\HttpFoundation\FileBag {#47
#parameters: array:1 [
"avatar" => Symfony\Component\HttpFoundation\File\UploadedFile {#32
-test: false
-originalName: "IMG_20200423_000129.jpg"
-mimeType: "application/octet-stream"
-error: 1
path: ""
filename: ""
basename: ""
pathname: ""
extension: ""
realPath: "/var/www/html/public"
aTime: 1970-01-01 00:00:00
mTime: 1970-01-01 00:00:00
cTime: 1970-01-01 00:00:00
inode: false
size: false
perms: 00
owner: false
group: false
type: false
writable: false
readable: false
executable: false
file: false
dir: false
link: false
}
]
}
+cookies: Symfony\Component\HttpFoundation\InputBag {#46
#parameters: array:4 [
"default-theme" => null
"XSRF-TOKEN" => "HS4iBsWFFtGoNn8pD3VJdn1n8K827IteDq0KmXKt"
"laravel_session" => "1YKtregY1ZI7xAHpp74LhQggyh3UHcK1ILoceHQS"
"x-clockwork" => null
]
}
+headers: Symfony\Component\HttpFoundation\HeaderBag {#49
#headers: array:15 [
"host" => array:1 [
0 => "192.168.0.2:84"
]
"connection" => array:1 [
0 => "keep-alive"
]
"content-length" => array:1 [
0 => "2368642"
]
"pragma" => array:1 [
0 => "no-cache"
]
"cache-control" => array:1 [
0 => "no-cache"
]
"dnt" => array:1 [
0 => "1"
]
"x-csrf-token" => array:1 [
0 => "HS4iBsWFFtGoNn8pD3VJdn1n8K827IteDq0KmXKt"
]
"user-agent" => array:1 [
0 => "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.82 Safari/537.36"
]
"content-type" => array:1 [
0 => "multipart/form-data; boundary=----WebKitFormBoundaryaxwTGvBKwTzBnFV0"
]
"accept" => array:1 [
0 => "/"
]
"origin" => array:1 [
0 => "http://192.168.0.2:84"
]
"referer" => array:1 [
0 => "http://192.168.0.2:84/register"
]
"accept-encoding" => array:1 [
0 => "gzip, deflate"
]
"accept-language" => array:1 [
0 => "en-GB,en-US;q=0.9,en;q=0.8"
]
"cookie" => array:1 [
0 => "default-theme=ngax; XSRF-TOKEN=eyJpdiI6IkZDNkFMMTl5NXpXZ2tlME1teTE5bEE9PSIsInZhbHVlIjoiMEhWN1hzVHhOSWpnenIxaUN0aTN5SGJrcmlDaU0zNTh1MEczeFNtSWFRMFFZMGN0WFl0K3M5NGY1K0NuMXpQN1U1N0lSelcySHNtMTRJSkZWUWdBUGFtdTBsbmFtYzJCQVZhVmhUQjhMTnRqaUdnb09rTzRlMk96dFN6eGNoT3MiLCJtYWMiOiJmMjNjNzU2YWQwYjQwNzAzNmNiZjMzNWY5NjBkYTgzYmIwZTYyNzcxMTIzOWUxN2FkYTI1N2Y3ZWZkMWFhN2JlIiwidGFnIjoiIn0%3D; laravel_session=eyJpdiI6IllDZUJORkNpSjd0TSsvWTBWbW56Y1E9PSIsInZhbHVlIjoiUGtWVThpcFdzdEhLak8zV08yQ3ZHSmQzWTVoMSswZEpTVmZuWHRWOWxJSVltc0x4MzBkNS9vQnFZeUJoMXpZSFBRNU1vdVZZRTFpL0N5MWNINEh3ZnlPd01Rekh3endYNjRQb1E5bGRnODIvMTZVd0pzY2lhUE0wYTZVVzVIbDciLCJtYWMiOiI5MTI2NjE1N2VkMjY2MjI2YzYxZGJmM2EyZTZkMTU4MDI5MzMzYWU1NTFlYmM4OTc0MjljNTYyYTc0MTAxOGRkIiwidGFnIjoiIn0%3D; x-clockwork=%7B%22requestId%22%3A%221647996184-4899-264569022%22%2C%22version%22%3A%225.1.5%22%2C%22path%22%3A%22%5C%2F__clockwork%5C%2F%22%2C%22webPath%22%3A%22%5C%2Fclockwork%5C%2Fapp%22%2C%22token%22%3A%22c79b58ff%22%2C%22metrics%22%3Atrue%2C%22toolbar%22%3Atrue%7D"
]
]
#cacheControl: array:1 [
"no-cache" => true
]
}
#content: null
#languages: null
#charsets: null
#encodings: null
#acceptableContentTypes: null
#pathInfo: "/tmp/image"
#requestUri: "/tmp/image"
#baseUrl: ""
#basePath: null
#method: "POST"
#format: null
#session: Illuminate\Session\Store {#445
#id: "1YKtregY1ZI7xAHpp74LhQggyh3UHcK1ILoceHQS"
#name: "laravel_session"
#attributes: array:4 [
"_token" => "HS4iBsWFFtGoNn8pD3VJdn1n8K827IteDq0KmXKt"
"_flash" => array:2 [
"old" => []
"new" => []
]
"url" => array:1 [
"intended" => "http://192.168.0.2:84/profile/update/hellotheresirsa"
]
"_previous" => array:1 [
"url" => "http://192.168.0.2:84/register"
]
]
#handler: Illuminate\Session\FileSessionHandler {#444
#files: Illuminate\Filesystem\Filesystem {#224}
#path: "/var/www/html/storage/framework/sessions"
#minutes: "120"
}
#serialization: "php"
#started: true
}
#locale: null
#defaultLocale: "en"
-preferredFormat: null
-isHostValid: true
-isForwardedValid: true
#json: null
#convertedFiles: null
#userResolver: Closure($guard = null) {#407
class: "Illuminate\Auth\AuthServiceProvider"
this: Illuminate\Auth\AuthServiceProvider {#143 …}
use: {
$app: Illuminate\Foundation\Application {#3 …}
}
}
#routeResolver: Closure() {#416
class: "Illuminate\Routing\Router"
this: Illuminate\Routing\Router {#25 …}
use: {
$route: Illuminate\Routing\Route {#328 …}
}
}
basePath: ""
format: "html"
}
Reproduction
just uploading images as usual
here is my vue.js code
<file-pond
id="avatar"
name="avatar"
v-model="form.avatar"
ref="pond"
label-idle="Drop image here..."
v-bind:allow-multiple="false"
accepted-file-types="image/jpeg, image/png"
:server="{
url: '/tmp/image',
headers: {
'X-CSRF-TOKEN': $page.props.csrf
}
}"
@processfile="addFile"
@removefile="addFile"
/>
here is the imports and initialisation
import vueFilePond from "vue-filepond";
// Import FilePond styles
import "filepond/dist/filepond.min.css";
// Import FilePond plugins
// Please note that you need to install these plugins separately
// Import image preview plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
// Create component
const FilePond = vueFilePond(
FilePondPluginFileValidateType,
FilePondPluginImagePreview,
);
import { useForm } from "@inertiajs/inertia-vue3"
export default {
name: "Register",
components: {
NavigationBar,
Footer,
FilePond
}
Environment
- Device: Raspberry pi 4b
- OS: Docker php:apache-8.1.3-bullseye
- Browser: 99.0.4844.82
- Vue version: 3.2.31