Hugging Face's logo

algorembrant
/
mt5-analyzer

Model card Files
xet
Community
mt5-analyzer
File size: 2,251 Bytes
683d9cb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { motion } from 'framer-motion';
import axios from 'axios';
import { FaTimes } from 'react-icons/fa';

const UploadModal = ({ close, refresh }) => {
  const onDrop = useCallback(async (acceptedFiles) => {
    const formData = new FormData();
    
    // Separate HTML and Images
    acceptedFiles.forEach(file => {
      if (file.name.endsWith('.html')) {
        formData.append('htmlFile', file);
      } else if (file.name.endsWith('.png')) {
        formData.append('images', file);
      }
    });

    try {
      await axios.post('http://localhost:5000/api/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      });
      refresh();
      close();
    } catch (err) {
      alert("Error uploading files");
    }
  }, [close, refresh]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div className="fixed inset-0 bg-blue-900/20 backdrop-blur-sm flex items-center justify-center z-50">

      <motion.div 

        initial={{ opacity: 0, scale: 0.9 }}

        animate={{ opacity: 1, scale: 1 }}

        exit={{ opacity: 0, scale: 0.9 }}

        className="bg-black border border-gray-700 w-[600px] h-[400px] rounded-2xl p-4 flex flex-col relative"

      >

        <button onClick={close} className="absolute top-4 left-4 text-white hover:bg-gray-800 p-2 rounded-full">

          <FaTimes />

        </button>

        

        <div className="flex-1 flex flex-col items-center justify-center mt-8">

           <div {...getRootProps()} className={`border-2 border-dashed border-gray-600 rounded-xl w-full h-64 flex items-center justify-center cursor-pointer transition ${isDragActive ? 'bg-gray-900 border-blue-500' : ''}`}>

             <input {...getInputProps()} />

             <div className="text-center">

               <p className="text-blue-400 font-bold text-lg">Drop MT5 HTML & Images here</p>

               <p className="text-gray-500 text-sm">ReportTester-ID.html + 4 pngs</p>

             </div>

           </div>

        </div>

      </motion.div>

    </div>
  );
};

export default UploadModal;