search

pqina / vue-filepond

🔌 A handy FilePond adapter component for Vue
https://pqina.nl/filepond
MIT License
1.93k stars 128 forks source link

[Bug filetype keeps changing from image mimetype] #244

Closed sgb999 closed 2 years ago

sgb999 commented 2 years ago

Is there an existing issue for this?

Have you updated Vue FilePond, FilePond, and all 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" => "<address>Apache/2.4.52 (Debian) Server at 192.168.0.2 Port 84</address>"
  "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