added dropzone

This commit is contained in:
Ghostie 2024-08-20 19:13:37 -05:00
parent 379a4525e0
commit e0067d4304
6 changed files with 42 additions and 7 deletions

25
package-lock.json generated
View File

@ -4,6 +4,9 @@
"requires": true,
"packages": {
"": {
"dependencies": {
"dropzone": "^6.0.0-beta.2"
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"axios": "^1.6.4",
@ -761,6 +764,12 @@
"win32"
]
},
"node_modules/@swc/helpers": {
"version": "0.2.14",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.2.14.tgz",
"integrity": "sha512-wpCQMhf5p5GhNg2MmGKXzUNwxe7zRiCsmqYsamez2beP7mKPCSiu+BjZcdN95yYSzO857kr0VfQewmGpS77nqA==",
"license": "MIT"
},
"node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@ -1119,6 +1128,16 @@
"dev": true,
"license": "MIT"
},
"node_modules/dropzone": {
"version": "6.0.0-beta.2",
"resolved": "https://registry.npmjs.org/dropzone/-/dropzone-6.0.0-beta.2.tgz",
"integrity": "sha512-k44yLuFFhRk53M8zP71FaaNzJYIzr99SKmpbO/oZKNslDjNXQsBTdfLs+iONd0U0L94zzlFzRnFdqbLcs7h9fQ==",
"license": "MIT",
"dependencies": {
"@swc/helpers": "^0.2.13",
"just-extend": "^5.0.0"
}
},
"node_modules/eastasianwidth": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@ -1486,6 +1505,12 @@
"jiti": "bin/jiti.js"
}
},
"node_modules/just-extend": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/just-extend/-/just-extend-5.1.1.tgz",
"integrity": "sha512-b+z6yF1d4EOyDgylzQo5IminlUmzSeqR1hs/bzjBNjuGras4FXq/6TrzjxfN0j+TmI0ltJzTNlqXUMCniciwKQ==",
"license": "MIT"
},
"node_modules/laravel-vite-plugin": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-1.0.5.tgz",

View File

@ -12,5 +12,8 @@
"postcss": "^8.4.41",
"tailwindcss": "^3.4.10",
"vite": "^5.0"
},
"dependencies": {
"dropzone": "^6.0.0-beta.2"
}
}

View File

@ -1 +1,11 @@
import './bootstrap';
import Dropzone from "dropzone";
Dropzone.autoDiscover = false;
const dropzone = new Dropzone("#dropzone", {
dictDefaultMessage: "Upload your image here",
dictRemoveFile: "Remove",
acceptedFiles: ".png,.jpg,.jpeg,.gif",
addRemoveLinks: true,
maxFiles: 1,
uploadMultiple: false,
});

View File

@ -1,4 +0,0 @@
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

View File

@ -7,7 +7,7 @@
<title>@yield('title') | DevStagram</title>
@vite('resources/css/app.css')
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-100">

View File

@ -6,7 +6,8 @@
<div class="md:flex md-items-center">
<div class="md:w-1/2 px-10">
Image goes here
<form action="/images" id="dropzone"
class="dropzone border-dashed border-2 w-full h-96 rounded flex flex-col justify-center items-center"></form>
</div>
<div class="md:w-1/2 p-10 bg-white rounded-lg shadow-xl mt-10 md:mt-0">