Web-Based Decentralized File Storage Solidity, JavaScript

```javascript
// JavaScript (Frontend - using a hypothetical library for interacting with a decentralized storage network like IPFS or Filecoin)

// Assuming we have a library called 'decentralizedStorage' that simplifies interaction with the network.
// This library is hypothetical and would need to be implemented based on the specific decentralized storage solution.

import decentralizedStorage from './decentralizedStorage'; // Hypothetical library
import { ethers } from 'ethers'; // For interacting with the smart contract

const uploadButton = document.getElementById('upload-button');
const fileInput = document.getElementById('file-input');
const displayArea = document.getElementById('display-area');
const contractAddressInput = document.getElementById('contract-address');
const connectWalletButton = document.getElementById('connect-wallet');
const statusArea = document.getElementById('status-area');

let provider;
let signer;
let contractAddress;
let contract; // Contract instance after connection

// Function to connect to MetaMask (or other web3 provider)
async function connectWallet() {
  if (typeof window.ethereum !== 'undefined') {
    try {
      await window.ethereum.request({ method: 'eth_requestAccounts' });
      provider = new ethers.providers.Web3Provider(window.ethereum);
      signer = provider.getSigner();
      statusArea.textContent = 'Wallet connected!';
      connectWalletButton.disabled = true; // Disable button after successful connection
    } catch (error) {
      console.error("Wallet connection error:", error);
      statusArea.textContent = 'Error connecting to wallet: ' + error.message;
    }
  } else {
    statusArea.textContent = 'Please install MetaMask!';
  }
}

connectWalletButton.addEventListener('click', connectWallet);

// Function to connect to the contract using the provided address
async function connectToContract() {
    contractAddress = contractAddressInput.value;

    if (!ethers.utils.isAddress(contractAddress)) {
      statusArea.textContent = "Invalid contract address.";
      return;
    }

    if (!signer) {
        statusArea.textContent = "Please connect your wallet first.";
        return;
    }

    try {
        // Assuming you have your contract's ABI in 'fileStorageContractABI'
        contract = new ethers.Contract(contractAddress, fileStorageContractABI, signer);
        statusArea.textContent = "Connected to contract at " + contractAddress;
    } catch (error) {
        console.error("Contract connection error:", error);
        statusArea.textContent = "Error connecting to contract: " + error.message;
    }

}

document.getElementById('connect-contract').addEventListener('click', connectToContract);


uploadButton.addEventListener('click', async () => {
    if (!signer || !contract) {
        statusArea.textContent = "Please connect your wallet and contract first.";
        return;
    }
    const file = fileInput.files[0];

    if (!file) {
        statusArea.textContent = "Please select a file.";
        return;
    }

    try {
      statusArea.textContent = "Uploading file to decentralized storage...";
      const cid = await decentralizedStorage.uploadFile(file); // Upload to IPFS (or Filecoin)
      statusArea.textContent = "File uploaded to decentralized storage with CID: " + cid;
      console.log("File uploaded to decentralized storage with CID:", cid);

      statusArea.textContent = "Registering CID with smart contract...";
      // Call the smart contract to store the CID
      const tx = await contract.registerFile(file.name, cid, file.size); // Assuming registerFile takes name, CID, and size
      statusArea.textContent = "Transaction sent. Waiting for confirmation...";

      await tx.wait(); // Wait for transaction to be mined
      statusArea.textContent = "File registered successfully with smart contract!";

      displayFileInfo(file.name, cid, file.size);


    } catch (error) {
      console.error("Upload error:", error);
      statusArea.textContent = 'Upload error: ' + error.message;
    }
});


// Function to display file information in the display area
function displayFileInfo(fileName, cid, fileSize) {
  const fileInfoDiv = document.createElement('div');
  fileInfoDiv.innerHTML = `
    <h3>File Information</h3>
    <p>Name: ${fileName}</p>
    <p>CID: ${cid}</p>
    <p>Size: ${fileSize} bytes</p>
    <a href="${decentralizedStorage.getFileUrl(cid)}" target="_blank">View File</a>
  `;
  displayArea.appendChild(fileInfoDiv);
}

// --- Hypothetical decentralizedStorage library functions ---

// In a real implementation, this would use a library like ipfs-http-client or similar.
const decentralizedStorage = {
  async uploadFile(file) {
    // Simulated upload (replace with actual IPFS/Filecoin upload code)

    //For IPFS
    //const ipfs = await IPFS.create();
    //const added = await ipfs.add(file);
    //return added.cid.toString();

    // For this example, we'll just return a fake CID
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network delay
    return 'fakeCID_' + Date.now(); // Replace with actual CID
  },
  getFileUrl(cid) {
    // Returns the URL to access the file using the CID.
    // This depends on how your decentralized storage is configured.
    return `https://ipfs.io/ipfs/${cid}`; // Example for IPFS
  }
};


// --- Hypothetical fileStorageContractABI ---
//  Replace with the actual ABI of your Solidity contract

const fileStorageContractABI = [
  {
    "inputs": [
      {
        "internalType": "string",
        "name": "_fileName",
        "type": "string"
      },
      {
        "internalType": "string",
        "name": "_cid",
        "type": "string"
      },
      {
        "internalType": "uint256",
        "name": "_fileSize",
        "type": "uint256"
      }
    ],
    "name": "registerFile",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  }
];
```

```html
<!-- HTML (Frontend) -->

<!DOCTYPE html>
<html>
<head>
  <title>Decentralized File Storage</title>
  <style>
    body { font-family: sans-serif; }
    button { padding: 10px 20px; }
    #display-area { margin-top: 20px; border: 1px solid #ccc; padding: 10px; }
  </style>
</head>
<body>
  <h1>Decentralized File Storage</h1>

  <button id="connect-wallet">Connect Wallet</button>

  <label for="contract-address">Contract Address:</label>
  <input type="text" id="contract-address" placeholder="Enter contract address">
  <button id="connect-contract">Connect to Contract</button>

  <input type="file" id="file-input">
  <button id="upload-button">Upload File</button>

  <div id="status-area"></div>
  <div id="display-area"></div>

  <script src="https://cdn.ethers.io/lib/ethers-5.4.umd.min.js"></script> <!-- Include ethers.js -->
  <script src="script.js"></script>
</body>
</html>
```

```solidity
// Solidity (Smart Contract)

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract FileStorage {

    struct FileInfo {
        string fileName;
        string cid;  // Content Identifier from IPFS or other storage
        uint256 fileSize; // File size in bytes
        address uploader;
    }

    mapping(string => FileInfo) public files; //CID to FileInfo mapping

    event FileRegistered(string cid, string fileName, uint256 fileSize, address uploader);

    // Function to register a file's CID, name, and size
    function registerFile(string memory _fileName, string memory _cid, uint256 _fileSize) public {
        require(bytes(_fileName).length > 0, "File name cannot be empty");
        require(bytes(_cid).length > 0, "CID cannot be empty");
        require(_fileSize > 0, "File size must be greater than zero");

        require(files[_cid].cid.length == 0, "File already registered");

        files[_cid] = FileInfo({
            fileName: _fileName,
            cid: _cid,
            fileSize: _fileSize,
            uploader: msg.sender
        });

        emit FileRegistered(_cid, _fileName, _fileSize, msg.sender);
    }

    // Optional: Function to retrieve file information by CID
    function getFileInfo(string memory _cid) public view returns (string memory, string memory, uint256, address) {
        require(bytes(_cid).length > 0, "CID cannot be empty");
        require(files[_cid].cid.length > 0, "File not registered");

        return (files[_cid].fileName, files[_cid].cid, files[_cid].fileSize, files[_cid].uploader);
    }

    // Optional: Function to allow only the contract owner to delete file records.
    address public owner;

    constructor() {
        owner = msg.sender;
    }

    modifier onlyOwner() {
        require(msg.sender == owner, "Only the owner can call this function");
        _;
    }

    function deleteFile(string memory _cid) public onlyOwner {
        require(bytes(_cid).length > 0, "CID cannot be empty");
        require(files[_cid].cid.length > 0, "File not registered");

        delete files[_cid];
    }
}
```

**Explanation:**

1.  **Solidity (Smart Contract): `FileStorage.sol`**

    *   **Purpose:** This contract stores the metadata (name, CID, size) of files uploaded to decentralized storage.  It *does not* store the actual file data. The file data is stored on a decentralized storage solution like IPFS or Filecoin.
    *   **`FileInfo` struct:** Defines the structure for storing file information.
        *   `fileName`: The original name of the file.
        *   `cid`: The Content Identifier (CID) of the file on the decentralized storage network (e.g., IPFS). The CID is the crucial link to the actual file data.
        *   `fileSize`: The size of the file in bytes.
        *   `uploader`:  The Ethereum address of the user who uploaded the file.
    *   **`files` mapping:**  A mapping from the CID (string) to the `FileInfo` struct.  This allows you to quickly look up the file information using its CID.
    *   **`registerFile` function:**
        *   `require` statements: These ensure that the file name and CID are not empty, the file size is greater than zero, and the file has not already been registered.
        *   Creates a new `FileInfo` struct and stores it in the `files` mapping, associating it with the file's CID.
        *   Emits a `FileRegistered` event.  Events are important for off-chain applications to track when new files are registered.
    *   **`getFileInfo` function (Optional):** A `view` function that allows you to retrieve the file's metadata (name, CID, size, uploader) given its CID.  `view` functions do not cost gas.
    *   **`owner`, `onlyOwner` modifier, and `deleteFile` function (Optional):** These provide basic access control, allowing only the contract owner to delete file records.  Deleting records might be necessary for data governance or compliance purposes.  Be very careful about allowing deletion functionality.
    *   **CID (Content Identifier):** The CID is a unique identifier for the file's content on the decentralized storage network.  If the content of the file changes, the CID will also change.  This ensures content integrity.

2.  **JavaScript (Frontend): `script.js`**

    *   **Purpose:**  Provides a user interface for interacting with the smart contract and the decentralized storage network.  It handles the file upload, calls the smart contract to register the file's CID, and displays file information.
    *   **HTML Elements:**  Gets references to the HTML elements (buttons, input fields, display areas) for user interaction.
    *   **`connectWallet()` Function:** Connects to a user's Ethereum wallet (MetaMask). Uses `ethers.js` to create a provider and signer.
        *   `window.ethereum.request({ method: 'eth_requestAccounts' })`:  Requests access to the user's Ethereum accounts in MetaMask.
        *   `ethers.providers.Web3Provider(window.ethereum)`: Creates an `ethers.js` provider that uses the MetaMask's Ethereum provider.
        *   `provider.getSigner()`: Gets the signer (the user's account) from the provider.  The signer is used to sign transactions.
    *   **`connectToContract()` Function:**  Connects to the smart contract at the specified address.
        *   `new ethers.Contract(contractAddress, fileStorageContractABI, signer)`: Creates an `ethers.js` contract instance, allowing you to call the contract's functions.
    *   **`uploadButton.addEventListener('click', ...)`:**  This is the core upload logic.
        *   Gets the selected file from the `fileInput` element.
        *   Calls the `decentralizedStorage.uploadFile(file)` function (from the hypothetical decentralized storage library) to upload the file to IPFS (or Filecoin). This function *would* handle the complexities of interacting with the decentralized storage network.
        *   Calls the `contract.registerFile(file.name, cid, file.size)` function to register the file's metadata (name, CID, size) on the smart contract.
        *   `await tx.wait()`: Waits for the transaction to be mined (confirmed on the blockchain).
        *   Calls `displayFileInfo()` to display the file's information in the `displayArea`.
    *   **`displayFileInfo()` Function:** Creates HTML elements to display the file's name, CID, size, and a link to view the file on IPFS.
    *   **`decentralizedStorage` (Hypothetical Library):** This is a placeholder for the actual code that interacts with a decentralized storage network like IPFS or Filecoin.  **This is the part you would need to implement using a library like `ipfs-http-client` or the Filecoin client library.**
        *   `uploadFile(file)`:  This function would upload the file to IPFS (or Filecoin) and return the CID.  The example provides a placeholder that simulates an upload and returns a fake CID.
        *   `getFileUrl(cid)`:  This function would return the URL to access the file on IPFS (or Filecoin) using the CID.
    *   **`fileStorageContractABI`:**  **Replace this with the actual ABI (Application Binary Interface) of your compiled Solidity smart contract.**  The ABI is a JSON array that describes the contract's functions, events, and data structures.  It's essential for `ethers.js` to interact with the contract.

3.  **HTML (Frontend): `index.html`**

    *   **Purpose:**  Defines the structure and user interface of the web application.
    *   Contains the input fields, buttons, and display areas.
    *   Includes the `ethers.js` library from a CDN.  You could also install it using `npm` and bundle it with your JavaScript code.
    *   Links to the `script.js` file.

**To Run This Example:**

1.  **Set up your development environment:**
    *   Install Node.js and npm.
    *   Install MetaMask in your browser.
2.  **Deploy the Smart Contract:**
    *   Compile the `FileStorage.sol` contract using a Solidity compiler (like Remix or Hardhat).
    *   Deploy the compiled contract to a test network (like Ganache, Hardhat Network, or Goerli/Sepolia) or a real Ethereum network.  You'll need some ETH to pay for gas.
    *   Get the contract address from the deployment transaction.
3.  **Configure the Frontend:**
    *   Create an `index.html` file with the HTML code above.
    *   Create a `script.js` file with the JavaScript code above.
    *   **Replace the placeholder `fileStorageContractABI` in `script.js` with the actual ABI of your compiled smart contract.**  You can usually get the ABI from the Solidity compiler output (e.g., from Remix).
    *   **Replace the placeholder code in the `decentralizedStorage` object in `script.js` with actual code that interacts with IPFS or Filecoin.** You'll need to use a library like `ipfs-http-client` (for IPFS) or the Filecoin client library (for Filecoin).
    *   **Update the `getFileUrl` function** to return the correct URL for accessing files on your decentralized storage network.
4.  **Run the Frontend:**
    *   Serve the `index.html` file using a web server (e.g., `npx serve .` in the directory containing your files, or using a more sophisticated development server like webpack-dev-server).
    *   Open the `index.html` file in your browser.
    *   Connect your MetaMask wallet.
    *   Enter the contract address in the "Contract Address" field and click "Connect to Contract."
    *   Select a file and click "Upload File."

**Important Considerations:**

*   **Decentralized Storage Choice:** Choose a decentralized storage solution (IPFS, Filecoin, Arweave, etc.) based on your requirements (cost, performance, permanence).  The `decentralizedStorage` library needs to be implemented specifically for the chosen solution.
*   **Security:**
    *   **Smart Contract Security:**  Audited smart contracts are crucial for production deployments. Consider potential vulnerabilities like reentrancy attacks, integer overflows, and denial-of-service attacks.
    *   **Frontend Security:**  Protect against XSS (Cross-Site Scripting) and other frontend vulnerabilities. Sanitize user input.
    *   **Data Encryption:** If you need to store sensitive data, encrypt it *before* uploading it to the decentralized storage network.  The decentralized storage network itself does not provide encryption by default.
*   **Scalability:**  Consider how your solution will scale as the number of files increases.
*   **Cost:**  Be aware of the costs associated with decentralized storage and Ethereum transactions.  Decentralized storage can involve storage fees and retrieval fees. Ethereum transactions have gas costs.
*   **Mutability:**  Decentralized storage solutions like IPFS are *content-addressed*, meaning that the CID is based on the content of the file.  If the file changes, the CID changes.  This makes it difficult to "update" files in place.  You would typically upload a new version of the file, get a new CID, and update the smart contract with the new CID.
*   **Error Handling:**  Implement robust error handling in both the frontend and the smart contract.

This example provides a basic framework.  A real-world implementation would require more comprehensive error handling, security measures, and integration with a specific decentralized storage solution.  The key is the interaction between the Solidity contract, which provides a permanent and auditable record of the file metadata, and the decentralized storage network, which provides a reliable and censorship-resistant way to store the file data itself.