создать ссылку для скачивания файла - PullRequest
Новая
       23

создать ссылку для скачивания файла

0 голосов
/ 16 марта 2020

У меня есть вход, через который я загружаю файлы, помещаю их в массив и отображаю их в al oop. Как убедиться, что, нажав на кнопку, я могу загрузить файл, который я загрузил и отобразил в al oop? Что должно быть в href? или нужно что то еще делать ?? Когда я нажимаю на ссылку, я получаю файл ошибки. 

    <a
      href={item.name} // name: "factorio_icon.jpg"
      download
    >{item.name}</a>

enter image description here

................. .................................................. .................................................. .................................................. .. 

import React, {useState} from 'react';

import '../opros-page.scss';
import QuestionNewEntity from 'models/entity/QuestionNewEntity';


export interface TextResponseProps extends React.ComponentProps<'div'> {
  question: QuestionNewEntity;
  answerArray: any;
}

const Attachment: React.FC<TextResponseProps> = ({question, answerArray}) => {
  // console.log(question)

  const [array, setArray]: any = useState([]);
console.log(array)
  return (
    <div className="label-block quiz-block__label-block-type1">
      <span className="label-block__title">{question.title}</span>

      <div className="label-block-files">
        {array.map((item: any, i: number) => {
          return <div
            key={i}
            className="label-block-files__file"
          >
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path
                  d="M18.3049 2.0953C16.1128 -0.0494691 12.6086 -0.0490026 10.4171 2.09636L1.22597 11.2875C-0.43597 12.9887 -0.404209 15.7149 1.29692 17.3769C2.97005 19.0115 5.64217 19.0115 7.31531 17.3769L15.638 9.05415C16.72 7.97218 16.72 6.21793 15.638 5.13596C14.5561 4.05399 12.8018 4.05399 11.7198 5.13596L3.75896 13.0968C3.48129 13.3843 3.48926 13.8425 3.77677 14.1201C4.05724 14.391 4.50185 14.391 4.78232 14.1201L12.7432 6.15928C13.2711 5.65355 14.109 5.67158 14.6147 6.19948C15.1051 6.71144 15.1051 7.51887 14.6147 8.03083L6.29199 16.3535C5.16766 17.4619 3.35768 17.4489 2.24934 16.3246C1.15219 15.2116 1.15219 13.4238 2.24934 12.3109L11.4405 3.11968C13.0777 1.48191 15.7325 1.48144 17.3702 3.11858C19.008 4.75571 19.0085 7.41057 17.3713 9.04834L8.18016 18.2395C7.87658 18.4995 7.84122 18.9564 8.1012 19.26C8.36119 19.5635 8.81806 19.5989 9.12164 19.3389C9.14996 19.3147 9.17634 19.2883 9.2006 19.26L18.3918 10.0688C20.5696 7.84297 20.5307 4.2731 18.3049 2.0953Z"
                  fill="#1FAF75"/>
              </g>
              <defs>
                <clipPath id="clip0">
                  <rect width="20" height="20" fill="white"/>
                </clipPath>
              </defs>
            </svg>
            <a
              href={item.name}
              download
            >{item.name}</a> <span className="label-block-files__file-size">({item.size}МБ)</span>
            <button
              className="label-block-files__file-btn-delete"
              onClick={() => {
                setArray(array.filter((item: any, k: any) => i !== k));
                answerArray(question, array.filter((item: any, k: any) => i !== k));
              }}
            >
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 1.2L10.8 0L6 4.8L1.2 0L0 1.2L4.8 6L0 10.8L1.2 12L6 7.2L10.8 12L12 10.8L7.2 6L12 1.2Z"
                      fill="#F43649"/>
              </svg>
            </button>
          </div>
        })}
      </div>

      <button className="label-block__btn">
        <input
          type="file"
          onChange={(e: any) => {
            setArray([...array, e.target.files[0]]);
            answerArray(question, [...array, e.target.files[0]])
          }}
          multiple
        />
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0)">
            <path
              d="M18.3049 2.0953C16.1128 -0.0494691 12.6086 -0.0490026 10.4171 2.09636L1.22597 11.2875C-0.43597 12.9887 -0.404209 15.7149 1.29692 17.3769C2.97005 19.0115 5.64217 19.0115 7.31531 17.3769L15.638 9.05415C16.72 7.97218 16.72 6.21793 15.638 5.13596C14.5561 4.05399 12.8018 4.05399 11.7198 5.13596L3.75896 13.0968C3.48129 13.3843 3.48926 13.8425 3.77677 14.1201C4.05724 14.391 4.50185 14.391 4.78232 14.1201L12.7432 6.15928C13.2711 5.65355 14.109 5.67158 14.6147 6.19948C15.1051 6.71144 15.1051 7.51887 14.6147 8.03083L6.29199 16.3535C5.16766 17.4619 3.35768 17.4489 2.24934 16.3246C1.15219 15.2116 1.15219 13.4238 2.24934 12.3109L11.4405 3.11968C13.0777 1.48191 15.7325 1.48144 17.3702 3.11858C19.008 4.75571 19.0085 7.41057 17.3713 9.04834L8.18016 18.2395C7.87658 18.4995 7.84122 18.9564 8.1012 19.26C8.36119 19.5635 8.81806 19.5989 9.12164 19.3389C9.14996 19.3147 9.17634 19.2883 9.2006 19.26L18.3918 10.0688C20.5696 7.84297 20.5307 4.2731 18.3049 2.0953Z"
              fill="#1FAF75"/>
          </g>
          <defs>
            <clipPath id="clip0">
              <rect width="20" height="20" fill="white"/>
            </clipPath>
          </defs>
        </svg>
        Добавить
      </button>
    </div>
  );
};

export default Attachment;

1 Ответ

1 голос
/ 16 марта 2020

хорошо, я нашел это решение 

URL.createObjectURL(e.target.files[0])
...