रिटर्न वैल्यूज संदर्भ

useDropup हुक द्वारा लौटाई गई सभी चीजें।

अवलोकन

const {
  files,          // फाइल ऑब्जेक्ट्स की सरणी
  state,          // वर्तमान स्थिति
  actions,        // उपलब्ध क्रियाएं
  getDropProps,   // ड्रॉप जोन के लिए Props
  getInputProps,  // इनपुट एलिमेंट के लिए Props
  openFileDialog, // फाइल पिकर खोलें
} = useDropup();

files

सभी जोड़ी गई फाइलों को दर्शाने वाले DropupFile ऑब्जेक्ट्स की सरणी।

const { files } = useDropup();

files.forEach(file => {
  console.log(file.id);          // "abc123"
  console.log(file.name);        // "photo.jpg"
  console.log(file.size);        // 1234567
  console.log(file.type);        // "image/jpeg"
  console.log(file.status);      // "idle" | "uploading" | "complete" | "error"
  console.log(file.progress);    // 0-100
  console.log(file.preview);     // "blob:http://..." (केवल छवियां)
  console.log(file.uploadedUrl); // "https://..." (अपलोड के बाद)
  console.log(file.error);       // DropupError (अगर विफल)
});

DropupFile गुण

गुण	प्रकार	विवरण
id	string	अद्वितीय पहचानकर्ता
file	File	मूल ब्राउज़र File ऑब्जेक्ट
name	string	फाइल का नाम
size	number	बाइट्स में आकार
type	string	MIME प्रकार
status	FileStatus	वर्तमान स्थिति
progress	number	अपलोड प्रगति (0-100)
preview	string | undefined	छवियों के लिए प्रीव्यू URL
uploadedUrl	string | undefined	सफल अपलोड के बाद URL
response	unknown	सर्वर प्रतिक्रिया डेटा
error	DropupError | undefined	अपलोड विफल होने पर Error
meta	Record<string, unknown>	कस्टम मेटाडेटा

FileStatus मान

स्थिति	विवरण
'idle'	फाइल जोड़ी गई, अपलोड नहीं हो रही
'uploading'	अपलोड प्रगति में
'complete'	अपलोड सफल
'error'	अपलोड विफल
'paused'	अपलोड रुका हुआ (पुनः शुरू करने योग्य अपलोड)

state

ड्रॉपजोन की वर्तमान स्थिति।

const { state } = useDropup();

console.log(state.isDragging);   // ड्रैग करते समय true
console.log(state.isDragAccept); // ड्रैग की गई फाइलें वैध होने पर true
console.log(state.isDragReject); // ड्रैग की गई फाइलें अवैध होने पर true
console.log(state.isUploading);  // कोई फाइल अपलोड होने पर true
console.log(state.progress);     // समग्र प्रगति 0-100
console.log(state.status);       // 'idle' | 'uploading' | 'complete' | 'error'

स्टेट गुण

गुण	प्रकार	विवरण
isDragging	boolean	ड्रॉप जोन पर फाइलें ड्रैग की जा रही हैं
isDragAccept	boolean	ड्रैग की गई फाइलें सत्यापन पास करती हैं
isDragReject	boolean	ड्रैग की गई फाइलें सत्यापन में विफल
isUploading	boolean	कोई फाइल वर्तमान में अपलोड हो रही है
progress	number	सभी फाइलों की औसत प्रगति (0-100)
status	DropupStatus	समग्र अपलोड स्थिति

DropupStatus मान

स्थिति	विवरण
'idle'	कोई अपलोड प्रगति में नहीं
'uploading'	एक या अधिक फाइलें अपलोड हो रही हैं
'complete'	सभी अपलोड सफलतापूर्वक समाप्त
'error'	एक या अधिक अपलोड विफल

actions

सभी उपलब्ध क्रियाओं वाला ऑब्जेक्ट।

const { actions } = useDropup();

// अपलोड शुरू करें
actions.upload();              // सभी idle फाइलें अपलोड करें
actions.upload(['id1', 'id2']); // विशिष्ट फाइलें अपलोड करें

// अपलोड रद्द करें
actions.cancel();              // सभी अपलोड रद्द करें
actions.cancel('file-id');     // विशिष्ट फाइल रद्द करें

// फाइलें हटाएं
actions.remove('file-id');     // विशिष्ट फाइल हटाएं
actions.reset();               // सभी फाइलें हटाएं

// विफल अपलोड पुनः प्रयास करें
actions.retry();               // सभी विफल पुनः प्रयास करें
actions.retry(['id1']);        // विशिष्ट फाइलें पुनः प्रयास करें

// प्रोग्रामेटिकली फाइलें जोड़ें
actions.addFiles(fileList);    // File[] या FileList जोड़ें

// फाइल मेटाडेटा अपडेट करें
actions.updateFileMeta('file-id', { tag: 'important' });

एक्शन मेथड्स

upload(fileIds?)

फाइलें अपलोड शुरू करें।

// सभी idle फाइलें अपलोड करें
actions.upload();

// विशिष्ट फाइलें अपलोड करें
actions.upload(['file-id-1', 'file-id-2']);

पैरामीटर	प्रकार	विवरण
fileIds	string[] (वैकल्पिक)	अपलोड करने के लिए विशिष्ट फाइल IDs

cancel(fileId?)

चल रहे अपलोड रद्द करें।

// सभी अपलोड रद्द करें
actions.cancel();

// विशिष्ट फाइल रद्द करें
actions.cancel('file-id');

पैरामीटर	प्रकार	विवरण
fileId	string (वैकल्पिक)	रद्द करने के लिए विशिष्ट फाइल ID

remove(fileId)

सूची से एक फाइल हटाएं।

actions.remove('file-id');

पैरामीटर	प्रकार	विवरण
fileId	string	हटाने के लिए फाइल ID

reset()

सभी फाइलें हटाएं और स्टेट रीसेट करें।

actions.reset();

retry(fileIds?)

विफल अपलोड पुनः प्रयास करें।

// सभी विफल अपलोड पुनः प्रयास करें
actions.retry();

// विशिष्ट फाइलें पुनः प्रयास करें
actions.retry(['file-id-1']);

पैरामीटर	प्रकार	विवरण
fileIds	string[] (वैकल्पिक)	पुनः प्रयास के लिए विशिष्ट फाइल IDs

addFiles(files)

प्रोग्रामेटिकली फाइलें जोड़ें।

// क्लिपबोर्ड से
document.addEventListener('paste', (e) => {
  const files = e.clipboardData?.files;
  if (files) {
    actions.addFiles(files);
  }
});

// अन्य स्रोत से
actions.addFiles([file1, file2]);

पैरामीटर	प्रकार	विवरण
files	File[] | FileList	जोड़ने के लिए फाइलें

updateFileMeta(fileId, meta)

फाइल मेटाडेटा अपडेट करें।

actions.updateFileMeta('file-id', {
  description: 'मेरी फोटो',
  tags: ['छुट्टी', '2024'],
});

पैरामीटर	प्रकार	विवरण
fileId	string	अपडेट करने के लिए फाइल ID
meta	Record<string, unknown>	मर्ज करने के लिए मेटाडेटा

getDropProps

ड्रॉप जोन एलिमेंट पर स्प्रेड करने के लिए props लौटाता है।

const { getDropProps, getInputProps } = useDropup();

<div {...getDropProps()}>
  <input {...getInputProps()} />
  फाइलें यहां ड्रॉप करें
</div>

कस्टम Props के साथ

<div
  {...getDropProps({
    className: 'my-dropzone',
    onClick: (e) => {
      // आपका कस्टम क्लिक हैंडलर
      console.log('क्लिक हुआ!');
    },
  })}
>
  <input {...getInputProps()} />
</div>

लौटाए गए Props

गुण	प्रकार	विवरण
onDragEnter	function	ड्रैग एंटर हैंडलर
onDragOver	function	ड्रैग ओवर हैंडलर
onDragLeave	function	ड्रैग लीव हैंडलर
onDrop	function	ड्रॉप हैंडलर
onClick	function	क्लिक हैंडलर (डायलॉग खोलता है)
role	string	एक्सेसिबिलिटी रोल
tabIndex	number	फोकस के लिए टैब इंडेक्स

getInputProps

छिपे हुए फाइल इनपुट पर स्प्रेड करने के लिए props लौटाता है।

const { getInputProps } = useDropup();

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

कस्टम Props के साथ

<input
  {...getInputProps({
    id: 'file-input',
    name: 'files',
  })}
/>

लौटाए गए Props

गुण	प्रकार	विवरण
type	'file'	इनपुट प्रकार
accept	string	स्वीकृत फाइल प्रकार
multiple	boolean	एकाधिक फाइलों की अनुमति दें
onChange	function	चेंज हैंडलर
style	object	छिपे हुए स्टाइल्स

openFileDialog

प्रोग्रामेटिकली फाइल पिकर खोलने का फंक्शन।

const { openFileDialog } = useDropup();

<button onClick={openFileDialog}>
  फाइलें ब्राउज़ करें
</button>

उपयोग उदाहरण

पूर्ण फाइल सूची

function FileList() {
  const { files, actions, state } = useDropup({
    upload: { url: '/api/upload' },
  });

  return (
    <div>
      <h3>फाइलें ({files.length})</h3>

      {files.map(file => (
        <div key={file.id}>
          {file.preview && (
            <img src={file.preview} alt="" width={50} />
          )}
          <span>{file.name}</span>
          <span>{(file.size / 1024).toFixed(1)} KB</span>
          <span>{file.status}</span>

          {file.status === 'uploading' && (
            <progress value={file.progress} max={100} />
          )}

          {file.status === 'error' && (
            <>
              <span style={{ color: 'red' }}>{file.error?.message}</span>
              <button onClick={() => actions.retry([file.id])}>पुनः प्रयास</button>
            </>
          )}

          <button onClick={() => actions.remove(file.id)}>हटाएं</button>
        </div>
      ))}

      {state.isUploading && (
        <p>अपलोड हो रहा है... {state.progress}%</p>
      )}

      <button
        onClick={() => actions.upload()}
        disabled={state.isUploading || files.length === 0}
      >
        सभी अपलोड करें
      </button>

      <button onClick={() => actions.reset()}>
        सभी साफ करें
      </button>
    </div>
  );
}

ड्रैग स्टेट स्टाइलिंग

function StyledDropzone() {
  const { state, getDropProps, getInputProps } = useDropup({
    accept: 'image/*',
  });

  const getStyle = () => {
    if (state.isDragAccept) return { borderColor: 'green', backgroundColor: '#e8f5e9' };
    if (state.isDragReject) return { borderColor: 'red', backgroundColor: '#ffebee' };
    if (state.isDragging) return { borderColor: 'blue', backgroundColor: '#e3f2fd' };
    return { borderColor: 'gray', backgroundColor: 'white' };
  };

  return (
    <div
      {...getDropProps()}
      style={{
        border: '2px dashed',
        borderRadius: 8,
        padding: 40,
        textAlign: 'center',
        transition: 'all 0.2s',
        ...getStyle(),
      }}
    >
      <input {...getInputProps()} />
      {state.isDragReject ? (
        <p>केवल छवियां स्वीकार हैं!</p>
      ) : (
        <p>छवियां यहां ड्रॉप करें</p>
      )}
    </div>
  );
}