añadido crd para Song y transladada la logica de /gallery a un controller

resources/js/Components/ModalAñadirCancion.tsx

@@ -0,0 +1,52 @@
+import { Input } from '@headlessui/react';
+import { FormEvent, useState } from 'react';
+import InputLabel from './InputLabel';
+import Modal from './Modal';
+import PrimaryButton from './PrimaryButton';
+
+export default function ModalAñadirCancion({
+  showaddmodal,
+  addcancion,
+  setShowaddmodal,
+}: {
+  showaddmodal: boolean;
+  addcancion: (event: FormEvent<HTMLFormElement>) => void;
+  setShowaddmodal: (arg0: boolean) => void;
+}) {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+  return (
+    <Modal
+      show={showaddmodal}
+      onClose={() => setShowaddmodal(false)}
+      closeable={true}
+      maxWidth="md"
+    >
+      <form onSubmit={addcancion} className="p-6">
+        <h2 className="mb-2 text-lg font-medium text-gray-900 dark:text-gray-100">
+          Añadiendo Cancion
+        </h2>
+        <hr />
+        <div className="mt-2">
+          <InputLabel>Cancion a añadir. máximo 50MB</InputLabel>
+          <Input
+            type="file"
+            onChange={(e: any) => setSelectedFile(e.target.files[0])}
+            name="song"
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm file:mr-4 file:rounded-md file:border-0 file:bg-indigo-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+          />
+          <hr className="mt-2" />
+          <div className="flex place-content-center">
+            <PrimaryButton
+              className="mt-2"
+              type="submit"
+              disabled={!selectedFile}
+            >
+              Subir
+            </PrimaryButton>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  );
+}